Maison > Article > interface Web > Effet rétractable de la barre latérale
Effet rétractable de la barre latérale
- php中世界最好的语言original
- 2018-03-15 15:11:013542parcourir
Cette fois, je vais vous présenter l'effet de barre latérale évolutive. Quelles sont les précautions pour obtenir l'effet de barre latérale évolutive. Voici un cas pratique, jetons un oeil.
jquery implémente l'effet de mise à l'échelle de la barre latérale lorsque vous cliquez dessus. Cliquez pour réduire, la barre latérale se rétrécit vers la gauche et le bouton d'affichage s'affiche ; cliquez sur le bouton d'affichage, le bouton d'affichage se rétrécit vers la gauche et la barre latérale s'affiche.
Le code spécifique est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style>
*{margin: 0;padding: 0;}
#box{width: 100%;height: 100%;}
#left{width: 200px;float: left;background-color: royalblue;position: relative;}
#btn{width: 100%;height: 50px;background-color: darkgoldenrod;line-height: 50px;text-align: center;color: white;cursor: pointer;}
#btnb{width: 50px;height: 50px;background-color: red;position: absolute;cursor: pointer;left: -50px;line-height: 50px;text-align: center;}
</style>
</head>
<body>
<p id="box">
<p id="left">
<p id="btn">收缩</p>
</p>
<p id="btnb">
显示
</p>
</p>
<script type="text/javascript">
$(function(){
$a = $(window).height();
$("#left").height($a);
$("#btn").click(function(){
$("#left").animate({left:'-200px'});
$("#btnb").delay(500).animate({left:'0'});
});
$("#btnb").click(function(){
$("#btnb").animate({left:'-50px'});
$("#left").delay(500).animate({left:'0'});
});
});
</script>
</body>
</html>
Rendu :
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment deux zTree interagissent les uns avec les autres
Comment le plug-in Validate de jQuery valide les valeurs d'entrée
Que faire s'il n'y a pas de réflexion après une demande ajax réussie de données d'arrière-plan
Utilisation du panneau pliable jQuery EasyUI
Utilisation des onglets du panneau d'onglets jQuery EasyUI
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!