Verwenden Sie js, um Beispiele für responsive Seitenleisten zu schreiben-js-Tutorial-php.cn

Verwenden Sie js, um Beispiele für responsive Seitenleisten zu schreiben

PHPz

Freigeben： 2017-04-03 15:53:39

Original

1209 Leute haben es durchsucht

Um meine Fähigkeiten zu üben, musste ich zufällig eine Seitenleiste erstellen, als ich lernte, eine Website zu erstellen. Ich habe auch verschiedene Plug-Ins und Frameworks im Internet überprüft, um diese Funktion zu erreichen. Aber ich wollte lernen, js nativ zu verwenden, und habe kurz die Implementierung der Seitenleiste abgeschlossen, die als Referenz für Anfänger verwendet werden kann. Die Codierungsfähigkeiten sind begrenzt. Verwenden Sie js, um Beispiele für responsive Seitenleisten zu schreiben

Das Hauptdesign ist die Funktion animate(). Die Methode animate() führt benutzerdefinierte Animationen von CSS-Eigenschaftssätzen durch. Diese Methode ändert ein Element durch CSS-Stile von einem Zustand in einen anderen. Die Werte der CSS-Eigenschaften ändern sich schrittweise, sodass Sie animierte Effekte erstellen können. Nur numerische Werte können animiert werden (z. B. „margin:30px“). Zeichenfolgenwerte können nicht animiert werden (z. B. „Hintergrundfarbe: Rot“). Bitte suchen Sie selbst nach weiteren Informationen, ich werde sie nicht im Detail vorstellen. Darüber hinaus wird die Medienabfragemethode verwendet, um das Größendesign der Seitenleiste anzupassen, indem die Bildschirmgröße des aktuellen Geräts erkannt wird. Mit der Medienabfragemethode können unterschiedliche Stile für unterschiedliche Bildschirmgrößen festgelegt werden, insbesondere wenn Sie eine responsive Seite entwerfen müssen.

Das Folgende ist die spezifische Implementierung mit dem angehängten Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1"/>
	<title>侧边栏</title>
	<link  href="css/sideBar.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<p class="container">
		<p class="header">
			<p class="nav-icon">
				<span></span>
				<span></span>
				<span></span>
			</p>
		</p>
		<p class="content">侧边栏内容</p>
		<p class="sideBar">
			<p class="sideBar-left">
				<p class="pider"></p>
				<p class="body-content">
					<p class="messageWarning item">
						<p><i class="message_icon"></i>消息提醒</p>
						<ul>
							<li class="news">
								<i class="circle"></i><a href="javascript:void()">消息1</a>
							</li>
							<li class="news">
								<i class="circle"></i><a href="javascript:void()">消息2</a>
							</li>
							<li class="news">
								<i class="circle"></i><a href="javascript:void()">消息3</a>
							</li>
							<li class="news">
								<i class="circle"></i><a href="javascript:void()">消息4</a>
							</li>
						</ul>
					</p>
					<p class="course item">
						<p><i class="icon"></i>课程</p>
						<ul>
							<li class="myInfo">
								<i class="circle"></i><a href="javascript:void()">我的课程</a>
							</li>
							<li class="Dynamic">
								<i class="circle"></i><a href="javascript:void()">课程动态</a>
							</li>
							<li class="question">
								<i class="circle"></i><a href="javascript:void()">问题空间</a>
							</li>
							<li class="homework">
								<i class="circle"></i><a href="javascript:void()">课程作业</a>
							</li>
						</ul>
					</p>
					<p class="myHome item">
						<a href="javascript:void()">
							<i class="home_icon"></i>我的主页
						</a>
					</p>
					<p class="exit item">
						<a href="javascript:void()">
							<i class="exit_icon"></i>退出
						</a>
					</p>
				</p>				
			</p>
			<p class="sideBar-right"></p>
		</p>		
	</p>
</body>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/sideBar.js"></script>
</html>

Nach dem Login kopieren

js Implementierung:

$(function(){

	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var sideBarWidth = windowWidth*0.8;
	//设置侧边栏左边宽度与右边高度
	$(".sideBar-left").height(windowHeight);
	$(".sideBar-right").height(windowHeight);
	//侧边栏由左向右滑动
	$(".nav-icon").on("click",function(){
		$(".sideBar").animate({left: "0"},350);
	});
	//点击退出，侧边栏由右向左滑动
	$(".exit").on("click",function(){
		$(".sideBar").animate({left: "-100%"},350);
	});

})

Nach dem Login kopieren

CSS-Design:

Das obige ist der detaillierte Inhalt vonVerwenden Sie js, um Beispiele für responsive Seitenleisten zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!