首页>>表单>>点击后动画出现注册/登录效果(2014-03-17)

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

点击后动画出现注册/登录效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

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