jquery仿苹果手机IOS开关效果

2016-02-22    编辑:ttibm     点击(
现在手机流行的对功能的一个开关操作了,我们在网页前段也来为各位介绍一下关于开关效果在html中的实现方法,具体如下。


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

<div class="switch-btn">
                        <span class="kx-img switch-img-off"></span>
                        <span class="point-slide"></span>
                        <span class="kx-img switch-img-on"></span>
                    </div>
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>


效果图:

1.jpg