jQuery實現滑動開關效果
阿新 • • 發佈:2020-08-03
本文例項為大家分享了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.5),0px 1px 0px rgba(255,255,0.2); -webkit-box-shadow: inset 0px 1px 1px rgba(0,0.2); box-shadow: inset 0px 1px 1px rgba(0,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,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的文字,顯示‘是',‘否',修改滑塊相對位置
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。