jQuery实现的可隐藏显示的登陆框

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 4 <head>
 5       <title>jQuery显示/隐藏登录框的演示_http://www.codefans.net</title>
 6     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 7       <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 8       <link rel="stylesheet" href="fx.slide.css" type="text/css" media="screen" />
 9     <script src="http://www.lanrentuku.com/js/jquery-1.2.6.pack.js" type="text/javascript"></script>
10     <script language="javascript" >
11         $(function(){
　　　　　　　　　　　　　　　　　　//切换
12            $("#toggleLogin").toggle(function(){
13                 $("#login").parent("div").animate({ height : 105 } , 520 );
　　　　　　　　　　　　　　　　//驱动
14                 $("#login").animate({marginTop : 0 } , 500 );
15                 $(this).blur();
16            },function(){
17                 $("#login").parent("div").animate({ height : 0 } , 500 );
18                 $("#login").animate({marginTop : -105 } , 520 ); 
19                 $(this).blur();
20            });
21            $("#closeLogin").click(function(){
22                 $("#login").parent("div").animate({ height : 0 } , 500 );
23                 $("#login").animate({marginTop : -105 } , 520 ); 
24            });
25         })
26     </script>
27 
28 </head>
29 
30 <body>
31     <!-- Login -->
32     <div style="margin: 0px; overflow: hidden; position: relative; height: 0px;">
33         <div id="login" style="margin: -105px 0px 0px; height: auto;">
34             <div class="loginContent">
35                 <form action="#" method="post">
36                     <label for="log"><b>Username: </b></label>
37                     <input class="field" type="text" name="log" id="log" value="" size="23" />
38                     <label for="pwd"><b>Password:</b></label>
39                     <input class="field" type="password" name="pwd" id="pwd" size="23" />
40                     <input type="submit" name="submit" value="" class="button_login" />
41                     <input type="hidden" name="redirect_to" value=""/>
42                 </form>
43                 <div class="left">
44                     <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
45                 <div class="right">Not a member? <a href="#">Register</a> | <a href="#">Lost your password?</a></div>
46             </div>
47             <div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
48         </div> 
49     </div> 
50     <!-- /login -->
51 
52     <div id="container">
53         <div id="top">
54         <!-- login -->
55             <ul class="login">
56                 <li class="left">&nbsp;</li>
57                 <li>Hello Guest!</li>
58                 <li>|</li>
59                 <li><a id="toggleLogin" href="#">Log In</a></li>
60             </ul> <!-- / login -->
61         </div> <!-- / top -->
62 
63         <div class="clearfix"></div>
64 
65 
66         <div id="content">
67             
68             <p>Mootools版： <a href="http://web-kreation.com/index.php/tutorials/nice-login-and-signup-panel-using-mootools-12/" title="Back to Tutorial">http://web-kreation.com/demos/login_form_mootools_1.2/</a></p>
69             <p>友情下载：<a href="http://www.codefans.net" target="_blank">源码爱好者</a> 这里：<a href="http://www.codefans.net" target="_blank">http://www.codefans.net</a></p>
70           <p>jQuery版：在Mootools版上，我修改成了jQuery版，虽然效果都差不多。但引用了不同的库。昆明春城网(Kun Ming Chun Cheng)www.KunMing.CC</p>
71         </div>
72         <div class="clearfix"></div>
73     </div>
74 
75 </body>
76 </html>
posted on 2017-01-11 21:57 Sharpest 阅读(277) 评论(0) 收藏举报