js pour obtenir un effet de défilement d'escalier en plein écran (implémentation du code)

Je suis actuellement en train de réorganiser le site Web officiel de notre entreprise. Le centre de produits fait défiler un écran à la fois. Je pense que l'ajout d'escaliers facilitera la navigation des utilisateurs, je viens donc d'écrire une démo.

Jetons d'abord un coup d'oeil à la structure, c'est très simple

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

Ensuite quelques CSS simples

			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;
			}

Les deux suivants sont 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");
							
						}
					})		
				}
			})

Résumé : ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique JavaScript

Manuel JavaScript en ligne

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!