夏日博客

A-A+

jquery仿苹果手机IOS开关效果

2016年01月12日 前端设计 暂无评论 阅读 7 views 次

现在手机流行的对功能的一个开关操作了，我们在网页前段也来为各位介绍一下关于开关效果在html中的实现方法，具体如下,首先定义一个外层div，里面的设置一个span作为按钮可以点击，当点击它的时候，使用动画让它向右滑动，在滑动的同时，可以更改一些其他属性，达到更好的效果.

  1. <div class="switch-btn">  
  2.     <span class="kx-img switch-img-off"></span>  
  3.     <span class="point-slide"></span>  
  4.   <span class="kx-img switch-img-on"></span>  
  5. </div>  
  6. <script>  
  7.    
  8.     var time=0;  
  9.    
  10.     $(".register-next-btn").click(function(){  
  11.    
  12.         location.href='register-next.html';  
  13.    
  14.     });  
  15.    
  16.     $('.switch-btn').click(function(){  
  17.    
  18.         time++;  
  19.    
  20.         if(time==1){  
  21.    
  22.             $(this).css({"background-color":"#d2d2d2"});  
  23.    
  24.             $('.point-slide').animate({"left":"44px"});  
  25.    
  26.             $('.switch-img-on').hide();  
  27.    
  28.             $('.switch-img-off').show();  
  29.    
  30.             $('#<a href="/fw/photo.html" target="_blank">ps</a>w').attr('type','password');  
  31.    
  32.         }  
  33.    
  34.         if(time==2){  
  35.    
  36.             $('.point-slide').animate({"left":"0px"});  
  37.    
  38.             $(this).css({"background-color":"#f68484"});  
  39.    
  40.             $('.switch-img-on').show();  
  41.    
  42.             $('.switch-img-off').hide();  
  43.    
  44.             $('#psw').attr('type','text');  
  45.    
  46.             time=0;  
  47.    
  48.         }  
  49.     });  
  50. </script>  
标签：

给我留言