Maison > Article > interface Web > Comment implémenter un interrupteur à bouton coulissant avec jQuery

Comment implémenter un interrupteur à bouton coulissant avec jQuery

不言original: 2018-06-25 16:20:393552parcourir

Cet article partagera avec vous un morceau de code jquery pour obtenir l'effet d'un interrupteur à bouton coulissant. Le code est simple et facile à comprendre, très bon et a une certaine valeur de référence. Les amis qui en ont besoin peuvent s'y référer. 🎜>

Tout le monde connaît le bouton de commutation coulissant. On peut le voir sur tous les principaux sites Web. Laissez-moi partager avec vous un article sur un effet de commutateur à bouton coulissant basé sur jquery. Les amis intéressés peuvent se référer au code d'implémentation.

Laissez-moi d'abord vous montrer le rendu :

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>

Il est à noter que :

1. La vitesse de glissement utilisée ici est de 300 ms, ce qui semble être une vitesse constante, et non une vitesse linéaire ; find Est-il possible d'avoir un mouvement linéaire comme la facilité en CSS3 ?

2. La fonction de rappel dans la méthode animate est la fonction appelée après la fin de l'exercice.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

jQuery et liste déroulante de cartes pliables CSS3 pour obtenir l'effet

jQuery à implémenter page coulissante supérieure fixe Fonctions affichées

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php jquery css3 回调函数 function

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment JavaScript détermine-t-il si le navigateur prend en charge les attributs CSS3 ?Article suivant：Comment JavaScript détermine-t-il si le navigateur prend en charge les attributs CSS3 ?

Articles Liés

Voir plus