全画面の階段スクロール効果を実現する 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;
			}

次の 2 つは 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オンラインマニュアル

以上が全画面の階段スクロール効果を実現する js (コード実装)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。