掌握小程序排名规则_jQuery完成滑动开关效果

jQuery实现滑动开关效果       这篇文章主要为大家详细介绍了jQuery实现滑动开关效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

HTML结构代码：

 div 
 span 是 /span 
 span /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;
/** cccc灰色 */
.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').unbind('click').bind('click',function(){
 if($(this).hasClass('ck-switch-on')){
 $('.('是');
 $('.('');
};

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

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