jQuery 如何實(shí)現(xiàn)一個(gè)滑動(dòng)按鈕開(kāi)關(guān)
更新時(shí)間：2016年12月01日 14:27:29 作者：十年樹(shù)木_2015
本文給大家分享一段jquery代碼實(shí)現(xiàn)滑動(dòng)按鈕開(kāi)關(guān)的效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的的朋友參考下
滑動(dòng)開(kāi)關(guān)按鈕大家在各大網(wǎng)站都能見(jiàn)到，下面小編給大家分享一篇基于jquery實(shí)現(xiàn)的一個(gè)滑動(dòng)按鈕開(kāi)關(guān)效果，感興趣的朋友可以參考下實(shí)現(xiàn)代碼。
先給大家展示下效果圖：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery做的滑動(dòng)按鈕開(kāi)關(guān)</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"/>
</head>
<style>
.switch{
width: 100px;
margin: 100px 0px 0 100px;
}
.btn_fath{
margin-top: 10px;
position: relative;
border-radius: 20px;
}
.btn1{
float: left;
}
.btn2{
float: right;
}
.btnSwitch{
height: 40px;
width: 50px;
border:none;
color: #fff;
line-height: 40px;
font-size: 16px;
text-align: center;
z-index: 1;
}
.move{
z-index: 100;
width: 40px;
border-radius: 20px;
height: 40px;
position: absolute;
cursor: pointer;
border: 1px solid #828282;
background-color: #f1eff0;
box-shadow: 1px 2px 2px 1px #fff inset,0 0 5px 1px #999;
}
.on .move{
left: 60px;
}
.on.btn_fath{
background-color: #5281cd;
}
.off.btn_fath{
background-color: #828282;
}
</style>
<body>
<div class="switch">
<div class="btn_fath clearfix on" onclick="toogle(this)">
<div class="move" data-state="on"></div>
<div class="btnSwitch btn1">ON</div>
<div class="btnSwitch btn2 ">OFF</div>
</div>
<div class="btn_fath clearfix off" onclick="toogle(this)">
<div class="move" data-state="off"></div>
<div class="btnSwitch btn1">ON</div>
<div class="btnSwitch btn2 ">OFF</div>
</div>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
function toogle(th){
var ele = $(th).children(".move");
if(ele.attr("data-state") == "on"){
ele.animate({left: "0"}, 300, function(){
ele.attr("data-state", "off");
alert("關(guān)！");
});
$(th).removeClass("on").addClass("off");
}else if(ele.attr("data-state") == "off"){
ele.animate({left: '60px'}, 300, function(){
$(this).attr("data-state", "on");
alert("開(kāi)！");
});
$(th).removeClass("off").addClass("on");
}
}
</script>
</body>
</html>
需要注意的是：
1、這邊滑動(dòng)使用的速度是300ms，好像是勻速，沒(méi)有線性的快慢那種；試著找下能不能像CSS3中ease那種線性運(yùn)動(dòng)的。
2、animate方法中的回調(diào)函數(shù)，即運(yùn)動(dòng)結(jié)束后調(diào)用的function。
以上所述是小編給大家介紹的jQuery =實(shí)現(xiàn)一個(gè)滑動(dòng)按鈕開(kāi)關(guān)的功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
大家應(yīng)該都會(huì)有這樣一種感覺(jué)，data函數(shù)在jQuery中看起來(lái)很不起眼, 就像沙灘上一顆平凡的沙子, 但仔細(xì)一瞅, 卻驚訝的發(fā)現(xiàn)data是jQuery中無(wú)比重要的一環(huán), 甚至jQuery中各種事件都基于此。下面就來(lái)詳細(xì)深入的學(xué)習(xí)下jQuery中的data()，感興趣的朋友們可以參考借鑒。2016-12-12
jQuery.clean源碼分析包括：jQuery.clean使用方法、思路分析及源碼注釋分析感興趣的朋友可以參考下2013-01-01
jQuery利用鍵盤(pán)上下鍵移動(dòng)表格內(nèi)容
這篇文章主要為大家詳細(xì)介紹了jQuery利用鍵盤(pán)上下鍵移動(dòng)表格內(nèi)容，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
基于jQuery實(shí)現(xiàn)搜索關(guān)鍵字自動(dòng)匹配功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)搜索關(guān)鍵字自動(dòng)匹配功能，自動(dòng)匹配搜索關(guān)鍵詞功能廣泛應(yīng)用到搜索引擎當(dāng)中，感興趣的小伙伴們可以參考一下2015-10-10
基于jQuery實(shí)現(xiàn)選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)選項(xiàng)卡效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jquery操作ID帶有變量的節(jié)點(diǎn)實(shí)例
下面小編就為大家?guī)?lái)一篇jquery操作ID帶有變量的節(jié)點(diǎn)實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
jquery封裝的對(duì)話框簡(jiǎn)單實(shí)現(xiàn)
本文為大家詳細(xì)介紹下使用jquery簡(jiǎn)單實(shí)現(xiàn)封裝的對(duì)話框，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
通過(guò)jquery-ui中的sortable來(lái)實(shí)現(xiàn)拖拽排序的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇通過(guò)jquery-ui中的sortable來(lái)實(shí)現(xiàn)拖拽排序的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jQuery插件boxScroll實(shí)現(xiàn)圖片輪播特效
本文給大家分享的是使用jQuery插件Boxscroll來(lái)實(shí)現(xiàn)簡(jiǎn)單的圖片輪播特效的代碼，非常簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-07-07
網(wǎng)上查了好多用著都不行，自己搞定了：在包含iframe的頁(yè)面中加入以下腳本，基本思想是在iframe加載內(nèi)容后重新設(shè)置高度，下面代碼盡在IE6中用過(guò)，沒(méi)在其他瀏覽器中測(cè)試。2009-12-12