jquery仿苹果手机ios9_jquery仿苹果手机IOS开关效果

【www.bbyears.com--ios】

首先定义一个外层div，里面的设置一个span作为按钮可以点击，当点击它的时候，使用动画让它向右滑动，在滑动的同时，可以更改一些其他属性，达到更好的效果

                        
                        
                        
                    
js代码：

<script>

    var time=0;

    $(".register-next-btn").click(function(){

        location.href='register-next.html';

    });

    $('.switch-btn').click(function(){

        time++;

        if(time==1){

            $(this).css({"background-color":"#d2d2d2"});

            $('.point-slide').animate({"left":"44px"});

            $('.switch-img-on').hide();

            $('.switch-img-off').show();

            $('#psw').attr('type','password');

        }

        if(time==2){

            $('.point-slide').animate({"left":"0px"});

            $(this).css({"background-color":"#f68484"});

            $('.switch-img-on').show();

            $('.switch-img-off').hide();

            $('#psw').attr('type','text');

            time=0;

        }

         

    });

</script>

效果图：

本文来源：http://www.bbyears.com/shoujikaifa/84612.html