전체 화면 계단 스크롤 효과를 달성하기 위한 Node.js(코드 구현)

현재 저희 회사 공식 홈페이지를 개편하고 있는데, 제품센터는 한 화면씩 스크롤이 됩니다. 계단을 추가하면 사용자들이 더 쉽게 탐색할 수 있을 것 같아 데모를 작성해봤습니다.

먼저 구조를 살펴보겠습니다. 매우 간단합니다.

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

그 다음 간단한 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;
			}

다음 두 개는 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");
							
						}
					})		
				}
			})

요약: 위 내용이 이 글의 전체 내용입니다. 도움이 되길 바랍니다. 모두의 학습에 도움이 되었습니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요!

관련 권장 사항:

php 공공 복지 교육 비디오 튜토리얼

JavaScript 그래픽 튜토리얼

JavaScript 온라인 매뉴얼

위 내용은 전체 화면 계단 스크롤 효과를 달성하기 위한 Node.js(코드 구현)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!