本文給大家分享一段jquery代碼實現滑動按鈕開關的效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的的朋友參考下
滑動開關按鈕大家在各大網站都能見到，下面跟大家分享一篇基於jquery實現的一個滑動按鈕開關效果，有興趣的朋友可以參考下實現代碼。
先給大家展示下效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery做的滑动按钮开关</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>
<p class="switch">
<p class="btn_fath clearfix on" onclick="toogle(this)">
<p class="move" data-state="on"></p>
<p class="btnSwitch btn1">ON</p>
<p class="btnSwitch btn2 ">OFF</p>
</p>
<p class="btn_fath clearfix off" onclick="toogle(this)">
<p class="move" data-state="off"></p>
<p class="btnSwitch btn1">ON</p>
<p class="btnSwitch btn2 ">OFF</p>
</p>
</p>
<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("关！");
});
$(th).removeClass("on").addClass("off");
}else if(ele.attr("data-state") == "off"){
ele.animate({left: '60px'}, 300, function(){
$(this).attr("data-state", "on");
alert("开！");
});
$(th).removeClass("off").addClass("on");
}
}
</script>
</body>
</html>
1、這邊滑動使用的速度是300ms，好像是勻速，沒有線性的快慢那種；試著找下能不能像CSS3中ease那種線性運動的。
2、animate方法中的回呼函數，即運動結束後所呼叫的function。
相關推薦：
###jQuery和CSS3折疊卡片式下拉列錶框實作效果###############jQuery實作滑動頁面固定頂部顯示的功能############################以上是jQuery 如何實作一個滑動按鈕的開關的詳細內容。更多資訊請關注PHP中文網其他相關文章！
