| html5 简单实用好看的滑动开关Jquery+css带效果图（无bug） | 您所在的位置：网站首页 › jquery实现div左右移动 › html5 简单实用好看的滑动开关Jquery+css带效果图（无bug） |
html5 简单实用好看的滑动开关Jquery+css带效果图（无bug）
|
效果： 条件：需要导入jquery文件 原文：https://www.cnblogs.com/nyah/p/7019111.html 原文有两种 1.无js实现 2.jquery实现 （他原来的第二种不够完美只能单独使用，如果是循环输出的有多行的话就会出问题，修改一个开关另一个开关也被修改，我进行了修改，可以直接拿去用了） 修改后如图：（开关互不影响）
代码在此： Document .cw-switch{display:inline-block;width:48px;height:24px;line-height:22px;border-radius:24px;vertical-align:middle;border:1px solid #ccc;background-color:#ccc;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all .2s ease-in-out} .cw-switch-inner{color:#fff;font-size:12px;position:absolute;left:25px} .cw-switch:after{content:'';width:20px;height:20px;border-radius:20px;background-color:#fff;position:absolute;left:1px;top:1px;cursor:pointer;transition:left .2s ease-in-out,width .2s ease-in-out} .cw-switch:active:after{width:26px} .cw-switch-checked{border-color:#39f;background-color:#39f} .cw-switch-checked .cw-switch-inner{left:8px} .cw-switch-checked:after{left:25px}.cw-switch-checked:active:after{left:19px} .cw-switch-disabled{cursor:not-allowed;background:#f3f3f3;border-color:#f3f3f3} .cw-switch-disabled:after{background:#ccc;cursor:not-allowed}.cw-switch-disabled .cw-switch-inner{color:#ccc} 开 $(function(){ $("[id = useswitch]").click(function(event) { if($(this).hasClass('cw-switch-checked')){ $(this).find("#word").text('关'); }else{ $(this).find("#word").text('开'); } $(this).toggleClass('cw-switch-checked'); }); }) |
【本文地址】
公司简介
联系我们