ホームページ > 記事 > ウェブフロントエンド > jQueryでスライドボタンスイッチを実装する方法
jQueryでスライドボタンスイッチを実装する方法
- 高洛峰オリジナル
- 2016-12-03 09:52:591443ブラウズ
スライド スイッチ ボタンはすべての主要な Web サイトで見ることができます。以下では、編集者が jquery に基づいたスライド ボタン スイッチの効果に関する記事を共有します。興味のある方は実装コードを参照してください。
コード:
<!DOCTYPE html>
<html>
<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>
<div class="btn_fath clearfix on" onclick="toogle(this)">
<div 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 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. ここでのスライドに使用される速度は 300 ミリ秒ですが、これは線形速度ではなく、CSS3 のような直線的な動きがあるかどうかを確認してみてください。の。
2. animateメソッドのコールバック関数は、運動終了後に呼び出される関数です。
上記は編集者が導入したjQuery＝スライドボタンスイッチの機能を実装するものです
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JQuery学習のまとめ次の記事：JQuery学習のまとめ