jQuery如何實(shí)現(xiàn)滑動(dòng)開關(guān)效果

發(fā)布時(shí)間：2020-08-03 09:06:49 來源：億速云閱讀：249 作者：小豬欄目：開發(fā)技術(shù)

這篇文章主要為大家展示了jQuery如何實(shí)現(xiàn)滑動(dòng)開關(guān)效果，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來看看吧。

Demo效果如下，點(diǎn)擊綠色橢圓小塊，實(shí)現(xiàn)可滑動(dòng)和動(dòng)畫效果，不是圖片切換。

HTML結(jié)構(gòu)代碼：

<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('');
 }
 });
};

點(diǎn)擊滑塊，動(dòng)態(tài)的修改html的文字，顯示‘是'，‘否'，修改滑塊相對(duì)位置

以上就是關(guān)于jQuery如何實(shí)現(xiàn)滑動(dòng)開關(guān)效果的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

jQuery如何實(shí)現(xiàn)滑動(dòng)開關(guān)效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽