Effet rétractable de la barre latérale-js tutoriel-php.cn

Effet rétractable de la barre latérale

php中世界最好的语言

Libérer： 2018-03-15 15:11:01

original

3596 Les gens l'ont consulté

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>

Copier après la connexion

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!