点击后动画出现注册/登录效果

点击后动画出现注册/登录效果

 

演示

 

 

XML/HTML Code

1. <img src="result.png" id="login" />  
2.     <img src="submit.png" id="submit" />  
3.       
4.     <div class="loginform" id="Login_form">  
5.           
6.         <form method="post" action="#">  
7.           
8.             <div>  
9.               
10.             <div class="form-item">  
11.               
12.              <label for="edit-name">Username:</label>  
13.              <input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">  
14.             </div>  
15.               
16.             <div class="form-item">  
17.               
18.              <label for="edit-pass">Password:</label>  
19.              <input type="password" class="form-text required" size="15" maxlength="60" id="edit-pass" name="pass">  
20.             </div>  
21.               
22.             </div>  
23.         </form>  
24.           
25.     </div>  
26.       
27.     <div class="loginform" id="SignupForm">  
28.           
29.         <form method="post" action="#">  
30.           
31.             <div>  
32.             <div class="form-item">  
33.               
34.              <label for="edit-name">Email:</label>  
35.              <input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">  
36.             </div>  
37.               
38.             <div class="form-item">  
39.               
40.              <label for="edit-name">Username:</label>  
41.              <input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">  
42.             </div>  
43.               
44.             <div class="form-item">  
45.               
46.              <label for="edit-pass">Password:</label>  
47.              <input type="password" class="form-text required" size="15" maxlength="60" id="edit-pass" name="pass">  
48.             </div>  
49.               
50.             </div>  
51.         </form>  
52.           
53.     </div>  
54.       
55.     <div id="nav-bar">  
56.       
57.         <div class="module-bg">  
58.             <a href="#" class="TopButtons" id="Log-in">Login</a>  
59.             <a href="#" class="TopButtons" id="signUp">SignUp</a>  
60.         </div>  
61.           
62.     </div>  

 

JavaScript Code

1. <script language="javascript">  
2. $(document).ready(function() {  
3.       
4.     $('#nav-bar').fadeIn();  
5.       
6.     $('#Log-in').click(function() {  
7.           
8.         $('#Log-in').css('background-color', '#006699');  
9.         $('#signUp').css('background-color', '#000000');  
10.         $('#submit').hide().css({'left' : '0px'});  
11.         $('#SignupForm').hide().css({'top' : '0px'});  
12.           
13.         $('#login').show().animate({  
14.           
15.             left   : '52%',  
16.               
17.         },400,function(){  
18.               
19.             $('#login').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });  
20.           
21.         });  
22.         ///  
23.         $('#Login_form').show().animate({  
24.       
25.             top   : '300px',  
26.               
27.         },700,function(){  
28.               
29.             //$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });  
30.         });  
31.     });  
32.       
33.     $('#signUp').click(function() {  
34.           
35.         $('#signUp').css('background-color', '#006699');  
36.         $('#Log-in').css('background-color', '#000000');  
37.         $('#login').hide().css({'left' : '0px'});  
38.         $('#Login_form').hide().css({'top' : '0px'});  
39.           
40.         $('#submit').show().animate({  
41.           
42.             left   : '52%',  
43.               
44.         },400,function(){  
45.               
46.             $('#submit').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });  
47.           
48.         });  
49.         ///  
50.         $('#SignupForm').show().animate({  
51.       
52.             top   : '300px',  
53.               
54.         },700,function(){  
55.               
56.             //$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });  
57.         });  
58.     });  
59.       
60. });  
61. </script>  

 

原文地址:http://www.freejs.net/article_biaodan_289.html