suchen

Heim >Web-Frontend >js-Tutorial >Seitenleiste mit einziehbarem Effekt

Seitenleiste mit einziehbarem Effekt

php中世界最好的语言
php中世界最好的语言Original
2018-03-15 15:11:013643Durchsuche

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>

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!

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：So passen Sie die Anzahl der angezeigten Nachrichten anNächster Artikel：So passen Sie die Anzahl der angezeigten Nachrichten an

In Verbindung stehende Artikel

Mehr sehen