欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)滑動開關(guān)效果

 更新時(shí)間：2020年08月02日 15:37:25   作者：ld__________  
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)滑動開關(guān)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)滑動開關(guān)效果的具體代碼，供大家參考，具體內(nèi)容如下

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

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)擊滑塊，動態(tài)的修改html的文字，顯示‘是'，‘否'，修改滑塊相對位置

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JQuery自適應(yīng)窗口大小導(dǎo)航菜單附源碼下載

    JQuery自適應(yīng)窗口大小導(dǎo)航菜單附源碼下載

    本文給大家分享jquery自適應(yīng)窗口大小導(dǎo)航菜單，也是一款響應(yīng)式的導(dǎo)航菜單，有深色樣式、淺色樣式、自定義樣式，接下來，需要的學(xué)習(xí)的小伙伴參考此文吧
    2015-09-09
  • Jquery ThickBox插件使用心得(不建議使用)

    Jquery ThickBox插件使用心得(不建議使用)

    最近發(fā)現(xiàn)一個不錯的基于jquery的插件thickBox ，感覺比facebox好用。但因?yàn)閖query官方不推薦使用。所以這個只是學(xué)習(xí)的朋友，不建議使用這個。
    2010-09-09
  • jQuery 借助插件Lavalamp實(shí)現(xiàn)導(dǎo)航條動態(tài)美化效果

    jQuery 借助插件Lavalamp實(shí)現(xiàn)導(dǎo)航條動態(tài)美化效果

    導(dǎo)航條動態(tài)顯示效果借助插件Lavalamp可以輕松實(shí)現(xiàn),以前用animate來實(shí)現(xiàn)，效果不是很好
    2013-09-09
  • jquery實(shí)現(xiàn)彈出層遮罩效果的簡單實(shí)例

    jquery實(shí)現(xiàn)彈出層遮罩效果的簡單實(shí)例

    這篇文章主要介紹了jquery實(shí)現(xiàn)彈出層遮罩效果的簡單實(shí)例。需要的朋友可以過來參考下，希望對大家有所幫助
    2014-03-03
  • jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法

    jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法

    這篇文章主要介紹了jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法,可實(shí)現(xiàn)類似淘寶首頁縱向菜單的顯示效果,涉及jQuery鼠標(biāo)響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
    2016-12-12

    • 最新評論