JQuery+css3实现滑动开关效果

前言

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

思路

分为三部分：

1. 结构

2. 样式

3. 效果

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

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

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

代码

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

html:

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:

效果

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

总结

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

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