jQuery 如何實現一個滑動按鈕開關

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jQuery 如何實現一個滑動按鈕開關

jQuery 如何實現一個滑動按鈕開關

編輯：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> 
<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("關！"); 
}); 
$(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 =實現一個滑動按鈕開關的功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！

JQuery入門技巧

JQuery 進入頁面默認給已賦值的復選框打鉤: 效果：　　　　JQuery代碼：$(#menuTree).find(div
jQuery插件FusionCharts繪制的2D帕累托圖效果示例【附demo源碼】: 本文實例講述了jQuery插件FusionCharts繪制的2D帕累托圖效果。分享給大家供大家參考，
jQuery實現的動態文字變化輸出效果示例【附演示與demo源碼下載】: 本文實例講述了jQuery實現的動態文字變化輸出效果。分享給大家供大家參考，具體如下：演示效果圖如下

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章