So implementieren Sie einen Schiebeknopfschalter mit jQuery-js-Tutorial-php.cn

So implementieren Sie einen Schiebeknopfschalter mit jQuery

不言

Freigeben： 2018-06-25 16:20:39

Original

3614 Leute haben es durchsucht

In diesem Artikel wird ein Teil des JQuery-Codes mitgeteilt, um den Effekt eines Schiebeknopfschalters zu erzielen. Der Code ist einfach und leicht zu verstehen, sehr gut und hat einen gewissen Referenzwert.

Jeder kennt den Schiebeknopf-Schaltereffekt, der auf allen wichtigen Websites zu sehen ist. Interessierte Freunde können sich auf den Implementierungscode beziehen.

Lassen Sie mich Ihnen zuerst das Rendering zeigen:

Code:

<!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: &#39;60px&#39;}, 300, function(){ 
$(this).attr("data-state", "on"); 
alert("开！"); 
}); 
$(th).removeClass("off").addClass("on"); 
} 
} 
</script> 
</body> 
</html>

Nach dem Login kopieren

Zu beachten sind:

1. Die hier verwendete Gleitgeschwindigkeit beträgt 300 ms, was eine konstante Geschwindigkeit zu sein scheint, keine lineare Geschwindigkeit to Es kann sich nicht linear bewegen, wie es in CSS3 der Fall ist.

2. Die Rückruffunktion in der animierten Methode ist die Funktion, die nach Ende der Übung aufgerufen wird.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

jQuery- und CSS3-Klappkarten-Dropdown-Listenfeld, um den Effekt zu erzielen

jQuery zum Implementieren Schiebeseite oben fixiert Angezeigte Funktionen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Schiebeknopfschalter mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!