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

阅读  ·  发布日期 2021-01-05 12:13  ·  admin
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的文字,显示‘是',‘否',修改滑块相对位置

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