Seitenleiste mit einziehbarem Effekt-js-Tutorial-php.cn

Seitenleiste mit einziehbarem Effekt

php中世界最好的语言

Freigeben： 2018-03-15 15:11:01

Original

3641 Leute haben es durchsucht

Dieses Mal werde ich Ihnen den skalierbaren Seitenleisteneffekt vorstellen. Was sind die Vorsichtsmaßnahmen, um den skalierbaren Seitenleisteneffekt zu erzielen?

jquery implementiert den Skalierungseffekt der Seitenleiste, wenn darauf geklickt wird. Klicken Sie zum Verkleinern, die Seitenleiste wird nach links verkleinert und die Anzeigeschaltfläche wird angezeigt; klicken Sie auf die Anzeigeschaltfläche, die Anzeigeschaltfläche wird nach links verkleinert und die Seitenleiste wird angezeigt.

Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Rendering:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie zwei zTree miteinander interagieren

Wie das Validate-Plug-in von jQuery Eingabewerte validiert

Was tun, wenn nach erfolgreicher Ajax-Anfrage nach Hintergrunddaten keine Reflexion erfolgt?

Verwenden des jQuery EasyUI-Faltpanels

Verwenden von Registerkarten des jQuery EasyUI-Registerkartenfelds

Das obige ist der detaillierte Inhalt vonSeitenleiste mit einziehbarem Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!