亲宝软件园·资讯

展开

jQuery实现滑动开关效果

ld__________ 人气:0

本文着重为大家仔细讲解了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的文字,显示‘是',‘否',修改滑块相对位置

加载全部内容

相关教程
猜你喜欢
用户评论