jQuery實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果
更新時(shí)間：2020年08月02日 15:37:25 作者：ld__________
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果的具體代碼，供大家參考，具體內(nèi)容如下
Demo效果如下，點(diǎn)擊綠色橢圓小塊，實(shí)現(xiàn)可滑動(dòng)和動(dòng)畫(huà)效果，不是圖片切換。
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ì)位置
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Jquery+Ajax+PHP+MySQL實(shí)現(xiàn)分類列表管理(上)
本文將采用Jquery+Ajax+PHP+MySQL來(lái)實(shí)現(xiàn)一個(gè)客戶分類列表的管理，如何利用Ajax和Json技術(shù)讓用戶操作起來(lái)覺(jué)得更輕松，感興趣的小伙伴們可以參考一下2015-10-10
jQuery中bind(),live(),delegate(),on()綁定事件方法實(shí)例詳解
這篇文章主要介紹了jQuery中bind(),live(),delegate(),on()綁定事件方法,結(jié)合實(shí)例形式詳細(xì)分析了bind(),live(),delegate(),on()方法綁定事件的具體使用技巧,并對(duì)比分析了四種方式的異同點(diǎn),需要的朋友可以參考下2016-01-01
jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
這篇文章主要介紹了jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單,可實(shí)現(xiàn)頁(yè)面向下滑動(dòng)后導(dǎo)航欄橫向懸浮并固定在頂部的功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
jQuery+CSS3文字跑馬燈特效的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jQuery+CSS3文字跑馬燈特效的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家看，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jQuery里提供三種方法來(lái)改變頁(yè)面元素的樣式，雖然它們和傳統(tǒng)方法的思想相通，但是卻節(jié)省了許多代碼2014-06-06
本篇文章主要是對(duì)jQuery選擇器進(jìn)行了總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2015-08-08
基于jQuery插件實(shí)現(xiàn)環(huán)形圖標(biāo)菜單旋轉(zhuǎn)切換特效
本文給大家分享一款基于jQuery環(huán)形圖標(biāo)旋轉(zhuǎn)切換特效。這是一款鼠標(biāo)點(diǎn)擊圖標(biāo)菜單圓形順時(shí)針或者逆時(shí)針旋轉(zhuǎn)切換代碼。有需要的小伙伴可以參考下。2015-05-05
jQuery實(shí)現(xiàn)的監(jiān)聽(tīng)導(dǎo)航滾動(dòng)置頂狀態(tài)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的監(jiān)聽(tīng)導(dǎo)航滾動(dòng)置頂狀態(tài)功能,涉及基于jQuery的事件響應(yīng)及狀態(tài)監(jiān)聽(tīng)等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無(wú)滾動(dòng)條左右拖拽的方法
這篇文章主要介紹了jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無(wú)滾動(dòng)條左右拖拽的方法,實(shí)例分析了jquery.nicescroll插件實(shí)現(xiàn)圖片拖拽效果的方法,需要的朋友可以參考下2015-08-08
jquery dataview數(shù)據(jù)視圖插件使用方法
這篇文章主要介紹了jquery dataview數(shù)據(jù)視圖插件使用方法，數(shù)據(jù)填充與視圖更新利器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12