js, um einen Treppenlaufeffekt im Vollbildmodus zu erzielen (Code-Implementierung)

Ich überarbeite derzeit die offizielle Website unseres Unternehmens. Ich denke, dass das Hinzufügen von Treppen das Durchsuchen für Benutzer erleichtert. Deshalb habe ich gerade eine Demo geschrieben.

Schauen wir uns zuerst die Struktur an, sie ist sehr einfach

　　　　　　<!--楼梯-->
		<ul class="louti">
			<li class="active">第1屏</li>
			<li>第2屏</li>
			<li>第3屏</li>
			<li>第4屏</li>
			<li>第5屏</li>
		</ul>
		<!--内容-->
		<p class="content">
			<p style="background-color: #87CEFB" class="ping staircase">
				<p>这是第1屏</p>
			</p>
			<p style="background-color: #FFC0CB" class="ping staircase">
				<p>这是第2屏</p>
			/p>
			<p style="background-color:#BAD5FF" class="ping staircase">
				<p>这是第3屏</p>
			</p>
			<p style="background-color: #3CB379" class="ping staircase">
				<p>这是第4屏</p>
			</p>
			<p style="background-color: #AFEEEE" class="ping staircase">
				<p>这是第5屏</p>
			</p>
		</p>

Und dann ein paar einfache CSS

			html,body {
				height: 100%;
			}
			body {
				margin: 0;
			}
			.content{height: 100%;}
			.content .ping {
				height: 100%;
			}
			li{
				list-style: none;
			}
			.louti{
				position: fixed;
				top: 25%;
				right: 3%;
			}
			.louti li{
				width: 100px;
				text-align: center;
				border: 1px solid #F5F5F5;
				height: 80px;
				line-height: 80px;
				cursor: pointer;
			}
			.louti li:nth-child(n+2){
				border-top: none;
			}
			.louti li.active{
				background: burlywood;
				color: white;
			}

Die nächsten beiden sind JS

			//内容一屏一屏的滚动
			document.addEventListener("DOMContentLoaded", function() {
				var body = document.body;
				var html = document.documentElement;
				var itv, height = document.body.offsetHeight;
				var page = scrollTop() / height | 0;
				addEventListener("resize", onresize, false);
				onresize();

				//鼠标滚轮事件  
				document.body.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) {
					clearTimeout(itv);
					itv = setTimeout(function() {
						//判断滚轮滚的方向  
						var delta = e.wheelDelta / 120 || -e.deltaY / 3;
						page -= delta;
						var max = (document.body.scrollHeight / height | 0) - 1;
						if(page < 0) {
							return page = 0;
						}
						if(page > max) {
							return page = max;
						}
						move();
					}, 100);
					e.preventDefault();
				});
				//当窗体发生变化时还是保证每次滚动滚一屏  
				function onresize() {
					height = body.offsetHeight;
					move();
				};

				function move() {
					var value = height * page;
					var diff = scrollTop() - value;
					(function callee() {
						diff = diff / 1.2 | 0;
						scrollTop(value + diff);
						if(diff) {
							itv = setTimeout(callee, 16);
						}
					})();
				};

				function scrollTop(v) {
					if(v == null) {
						return Math.max(body.scrollTop, html.scrollTop);
					} else {
						body.scrollTop = html.scrollTop = v;
					}
				}
			})
			
			//点击楼层按钮跳到相应的楼层
			var isMove=false;
			//点击右侧导航条
			$(".louti li").on("click",function(){
				isMove=true;
				//按钮变化
				$(this).removeClass().addClass("active").siblings("li").removeClass("active");
				//楼梯移动
				var index=$(this).index();
				var _topp=$(".staircase").eq(index).offset().top;
				$("html,body").stop().animate({scrollTop:_topp},200,function(){
					isMove=false;
				})
			})
			//楼梯滚动导航条相对移动
			$(window).scroll(function(){
				//判断是否在滚动，如果没有，则支执行这里的代码
				if(!isMove){
					//获取滚动距离
					var _scrollTop=$(document).scrollTop();
					//遍历所有楼梯
					$(".staircase").each(function(){
						var _topp=$(this).offset().top;
					
						//判断滚动距离是否大于楼梯的top值
						if(_scrollTop>=_topp){
							var index=$(this).index();
							$(".louti li").eq(index).removeClass().addClass("active")
							.siblings("li").removeClass("active");
							
						}
					})		
				}
			})

Zusammenfassung : Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!

Verwandte Empfehlungen:

PHP-Video-Tutorial zum öffentlichen Wohlfahrtstraining

JavaScript-Grafik-Tutorial

JavaScript Online-Handbuch

Das obige ist der detaillierte Inhalt vonjs, um einen Treppenlaufeffekt im Vollbildmodus zu erzielen (Code-Implementierung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!