suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie einen Schiebeknopfschalter mit jQuery

So implementieren Sie einen Schiebeknopfschalter mit jQuery

不言
不言Original
2018-06-25 16:20:393588Durchsuche

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>

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!

php jquery css3 回调函数 function
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie ermittelt JavaScript, ob der Browser CSS3-Attribute unterstützt?Nächster Artikel：Wie ermittelt JavaScript, ob der Browser CSS3-Attribute unterstützt?

In Verbindung stehende Artikel

Mehr sehen