于是就自己写了一个,先看下效果:
提示:您可以先修改部分代码再运行
做法很简单,首先是css布局,动画我没有用jquery的动画,直接用的css3,给变化的 span 和 来回滑动的 i 加上“transition”。css代码如下:
.switch-label{cursor:pointer;} .switch-label input{display:none;} .switch-label span{height:21px; line-height:21px; font-family:"微软雅黑"; transition:all 500ms; font-size:14px; display:inline-block; vertical-align:middle; border-radius:4px; overflow:hidden;} .switch-span{position:relative; border:2px solid red; width:55px; border-radius:2px;} .switch-span:before,.switch-span:after{position:absolute; z-index:1; color:#fff;} .switch-span:before{content:"是"; left:5px; top:0;} .switch-span:after{content:"否"; right:5px; top:0;} .switch-span i{display:inline-block; position:absolute; border-radius:2px; background:#fff; top:0; width:21px; height:21px; z-index:2; left:0; transition:all 500ms;} .switch-label.on .switch-span{border-color:#1980B6; background-color:#1980B6;} .switch-label.on .switch-span i{left:34px;} .switch-label.off .switch-span{border-color:#B5C1C7; background-color:#B5C1C7;} .switch-label.off .switch-span i{left:0;}html代码如下:
<label id="switch" class="switch-label off"> <input checked type="checkbox" /> <span class="switch-span"><i></i></span> <span> 是否启用过滤条件?</span> </label>“是” 和 “否”我使用css的方法加上的。所以html中看不到。
jquery代码如下:
<script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script> <script> $(function(){ $("#switch").click(function(){ var flag = $(this).hasClass("on"); if(flag){ $(this).removeClass("on").addClass("off").find("input").removeAttr("checked"); }else{ $(this).removeClass("off").addClass("on").find("input").attr("checked","checked"); } return false; }) }) </script>原理很简单,我就不多说了。