脚本宝典收集整理的这篇文章主要介绍了JQuery+css3实现滑动开关效果,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前言
为了前端的美观和用户体验的友好,有时我们会将某些选项的开关做成点击滑动显示的效果,特别是手机上。那么这里我将为大家讲解下如何使用jquery+CSS3实现该效果。
思路
分为三部分:
结构
样式
效果
结构和样式的话,不用废话,直接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;
-@R_406_1091@-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就可以达到开关的目的了。
其他不多说,大家自行体会吧。
以上是脚本宝典为你收集整理的JQuery+css3实现滑动开关效果全部内容,希望文章能够帮你解决JQuery+css3实现滑动开关效果所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。