This article provides a Demo code for jQuery to show the effect of the Instance login box of the hidden layer plug-in. It uses jquery to show the hidden layer toggle and blur to instance the height of the login id.
This article provides a Demo code for jquery to show the effect of the Instance login box of the hidden layer plug-in. It uses jquery to show the hidden layer toggle and blur to instance the height of the login id.
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en">
<Head>
<Title> jquery demo of the logon window of the hidden layer plug-in instance </title>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Link rel = "stylesheet" href = "style.css tutorial" type = "text/css" media = "screen"/>
<Link rel = "stylesheet" href = "fx.slide.css" type = "text/css" media = "screen"/>
<Script src = "/jquery-1.2.6.pack.js" type = "text/Webpage effects"> </script>
<Script language = "javascript">
$ (Function (){
$ ("# Togglelogin"). toggle (function (){
$ ("# Login"). parent ("div"). animate ({height: 105}, 520 );
$ ("# Login"). animate ({margintop: 0}, 500 );
$ (This). blur ();
}, Function (){
$ ("# Login"). parent ("div"). animate ({height: 0}, 500 );
$ ("# Login"). animate ({margintop:-105}, 520 );
$ (This). blur ();
});
$ ("# Closelogin"). click (function (){
$ ("# Login"). parent ("div"). animate ({height: 0}, 500 );
$ ("# Login"). animate ({margintop:-105}, 520 );
});
})
</Script></Head>
<Body>
<! -- Login -->
<Div style = "margin: 0px; overflow: hidden; position: relative; height: 0px;">
<Div id = "login" style = "margin:-105px 0px 0px; height: auto;">
<Div class = "logincontent">
<Form action = "#" method = "post">
<Label for = "log"> <B> username: </B> </label>
<Input class = "field" type = "text" name = "log" id = "log" value = "" size = "23"/>
<Label for = "pwd"> <B> password: </B> </label>
<Input class = "field" type = "password" name = "pwd" id = "pwd" size = "23"/>
<Input type = "submit" name = "submit" value = "" class = "button_login"/>
<Input type = "hidden" name = "redirect_to" value = ""/>
</Form>
<Div class = "left">
<Label for = "rememberme"> <input name = "rememberme" id = "rememberme" class = "rememberme" type = "checkbox" checked = "checked" value = "forever" /> remember me </label> </div>
<Div class = "right"> not a member? <A href = "#"> register </a> | <a href = "#"> lost your password? </A> </div>
</Div>
<Div class = "loginclose"> <a href = "#" id = "closelogin"> close panel </a> </div>
</Div>
</Div>
<! --/Login --><Div id = "container">
<Div id = "top">
<! -- Login -->
<Ul class = "login">
<Li class = "left"> & nbsp; </li>
<Li> hello guest! </Li>
<Li> | </li>
<Li> <a id = "togglelogin" href = "#"> log in </a> </li>
</Ul> <! --/Login -->
</Div> <! --/Top --><Div class = "clearfix"> </div>
</Body>
</Html>
Source code
Http://down.bKjia. c0m/down/code/jquery/2010/0908/20689.html
Effect preview address
Http://g.111cn.cn/javascript/js/20100907/jquery/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
