这篇文章主要为大家展示了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的文字,显示‘是',‘否',修改滑块相对位置
以上就是关于jQuery如何实现滑动开关效果的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。