本文实例为大家分享了jQuery实现滑动开关效果的具体代码，供大家参考，具体内容如下

Demo效果如下，点击绿色椭圆小块，实现可滑动和动画效果，不是图片切换。

HTML结构代码：

<div class="ck-switch"> <span class="ck-switch-on">是</span> <span class="ck-switch-off ck-switch-current ck-switch-current-40"></span></div>

CSS代码：

/** 外部div式样 */ck-switch{ width: 75px; height: 26px; margin: 0px auto; position: relative; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);}/** 是.的效果#66b9b3绿色 */.ck-switch-on{ color: #66b9b3; position: absolute; left: 10px; z-index: 0; font-weight: bold;}/** 否.的效果#cccccc灰色 */.ck-switch-off{ color: #CCCCCC; position: absolute; right: 10px; z-index: 0; font-weight: bold; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);}/** 绿色椭圆小块 */.ck-switch-current{ display: block; width: 30px; height: 20px; cursor: pointer; position: absolute; top: 3px; z-index: 1; background: #66b9b3; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;}/** left定位 */.ck-switch-current-3{ left: 3px;}.ck-switch-current-40{ left: 42px;}

JQuery代码：

function initCkSwitch(){ $('.ck-switch .ck-switch-off').unbind('click').bind('click',function(){ $('.ck-switch .ck-switch-on').addClass('ck-switch-current ck-switch-current-3').html(''); $('.ck-switch .ck-switch-off').removeClass('ck-switch-current ck-switch-current-40').html('否'); }); $('.ck-switch .ck-switch-on').unbind('click').bind('click',function(){ if($(this).hasClass('ck-switch-on')){ $('.ck-switch .ck-switch-on').removeClass('ck-switch-current ck-switch-current-3').html('是'); $('.ck-switch .ck-switch-off').addClass('ck-switch-current ck-switch-current-40').html(''); } });};

点击滑块，动态的修改html的文字，显示‘是'，‘否'，修改滑块相对位置

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。