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