JQuery+css3实现滑动开关效果

前言

为了前端的美观和用户体验的友好，有时我们会将某些选项的开关做成点击滑动显示的效果，特别是手机上。那么这里我将为大家讲解下如何使用JQuery+CSS3实现该效果。

思路

分为三部分：

1. 结构

2. 样式

3. 效果

结构和样式的话，不用废话，直接html+css就能完成，如果有不知道如何下手的，请参照我后面给出的代码。

效果的话，最简单的自然就是JQuery中的animate动画了。

至于判断开关的状态，大家可以在开关按钮中增加一个isopen的属性，详见后面代码。

代码

由于是从项目中扣下来的一部分，所有可能会有多余的东西，大家请酌情忽略。

html:

<div class="right">
    <div isopen="false" class="btnn"></div>
</div>

CSS:

.remind ul li .right {
    width:66px;
    height:36px;
    padding:3px;
    border-radius: 30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    background-color: #838383;
    position: relative;
}

.remind ul li .right .btnn {
    width:30px;
    height:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
    background-color: #fff;
    position: absolute;
}

JS:

<script src="/static/admin/js/jquery.min.js"></script>
<script>
    $(function(){
        $('.btnn').on('click',function(){
            if ($(this).attr('isopen') == 'false') {
                $(this).attr('isopen','true').animate({left:'33px'});
                $(this).parent().css('background-color','green');
            } else {
                $(this).attr('isopen','false').animate({left:'3px'});
                $(this).parent().css('background-color','#838383');
            }
        });
    });
</script>

效果

实际项目中运行的效果如下图所示：

总结

好了，效果完成，至于功能的话，只要配合Ajax+PHP就可以达到开关的目的了。

其他不多说，大家自行体会吧。