jQuery实现滑动开关效果

编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了jQuery实现滑动开关效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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的文字,显示‘是',‘否',修改滑块相对位置

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板