JS楼梯导航-CSDN论坛

⋅全选/反选

⋅JS楼梯导航

更多帖子

关注私信空间博客

堇年i

等级

本版专家分：0

勋章

签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！

脉脉勋章 绑定脉脉第三方账户获得

GitHub 绑定GitHub第三方账户获取

领英绑定领英第三方账户获取

结帖率 0%
<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title></title>

	<style type="text/css">

		*{

			margin: 0;

			padding: 0;

		}

		.somecontent{

			width: 1000px;

			height: 1232px;

			margin: 0 auto;

			background-color: #ccc;

		}

		.floor{

			width: 1000px;

			margin: 0 auto;

			height: 400px;

			background: yellowgreen;

			margin-bottom: 10px;

		}

		.f1{

			height: 433px;

		}

		.f2{

			height: 352px;

		}



		.leftNav{

			position: fixed;

			bottom: 110px;

			left: 10px;

			width: 60px;

		}

		.leftNav ul{

			list-style: none;

		}

		.leftNav ul li{

			width: 60px;

			height: 60px;

			background-color: #ccc;

		}

		.leftNav ul li a{

			display: block;

			width: 60px;

			height: 60px;

			line-height: 60px;

			text-align: center;

			text-decoration: none;

			font-size: 14px;

		}

		.leftNav ul li a.number{

			display: block;

		}

		.leftNav ul li a.chinese{

			display: none;

			color:white;

		}

		.leftNav ul li.cur a.number{

			display: none;

		}

		.leftNav ul li.cur a.chinese{

			display: block;

		}

		.leftNav ul li.cur{

			background-color: rgb(111,0,0);

		}

	</style>

</head>

<body>

	<div class="somecontent"></div>



	<div class="leftNav" id="leftNav">

		<ul>

			<li>

				<a href="javascript:;" class="number">1F</a>

				<a href="javascript:;" class="chinese">百货</a>

			</li>

			<li>

				<a href="javascript:;" class="number">2F</a>

				<a href="javascript:;" class="chinese">男装</a>

			</li>

			<li>

				<a href="javascript:;" class="number">3F</a>

				<a href="javascript:;" class="chinese">女装</a>

			</li>

			<li>

				<a href="javascript:;" class="number">4F</a>

				<a href="javascript:;" class="chinese">裤子</a>

			</li>

			<li>

				<a href="javascript:;" class="number">5F</a>

				<a href="javascript:;" class="chinese">童装</a>

			</li>

			<li>

				<a href="javascript:;" class="number">6F</a>

				<a href="javascript:;" class="chinese">运动</a>

			</li>

			<li>

				<a href="javascript:;" class="number">7F</a>

				<a href="javascript:;" class="chinese">电子</a>

			</li>

		</ul>

	</div>



	<div class="floor f1"></div>

	<div class="floor f2"></div>

	<div class="floor f3"></div>

	<div class="floor f4"></div>

	<div class="floor f5"></div>

	<div class="floor f6"></div>

	<div class="floor f7"></div>

	<div class="somecontent"></div>





	<script type="text/javascript">

		//左侧导航条的li

		var leftNavLis = document.getElementById("leftNav").getElementsByTagName("li");

		//得到所有楼层div，由于我们的楼层div没有放到同一个div里面，所以不好通过getElementsByTagName得到

		//那么我们就要遍历body的所有儿子，看看哪个儿子nodeType属性是1，并且有类型floor

		var floorArr = [];	//所有floor的div

		var floorOffsetTopArr = [];	//所有floor的offsetTop值



		for(var i = 0 ; i < document.body.childNodes.length ; i++){

			if(document.body.childNodes[i].nodeType == 1 && document.body.childNodes[i].className.indexOf("floor") != -1){

				floorArr.push(document.body.childNodes[i]);

				floorOffsetTopArr.push(document.body.childNodes[i].offsetTop);

			}

		}



		var floorArrLength = floorArr.length;



		//offsetTop这个数组，里面存放的是所有.floor楼层的offsetTop值，数组的最后一项应该就是最后一个楼层

		//的下边框距离页面顶部的距离。

		floorOffsetTopArr.push(floorArr[floorArrLength - 1].clientHeight + floorOffsetTopArr[floorArrLength - 1]);



		//当前楼层信号量，NaN表示不在任何楼层里

		var nowfloor = NaN;	

		//页面卷动事件

		window.onscroll = function(){

			//备份一下老楼层编号

			var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

			//判断此时在第几个楼层，就相当于判断我们现在的卷动值在正序数组中的第几位

			for(var i = 0 ; i < floorArrLength ; i++){

				if(scrollTop >= floorOffsetTopArr[i] - 200 && scrollTop < floorOffsetTopArr[i + 1] - 200){

					//此时在第i层，但是我们为了防止动画、DOM操作频繁触发，仅当楼层编号发生变化的时候

					//再做里面的事情，验证i有没有变化

					if(i != nowfloor){

						!isNaN(nowfloor) && (leftNavLis[nowfloor].className = "");

						//更改信号量

						nowfloor = i;

						//让新的信号量加cur

						leftNavLis[nowfloor].className = "cur";

					}

					

					break;

				}

			}

 

	 		//如果在数组中没有找到合适的位置：

			if(i == floorArrLength){

				//老信号量这个人去掉cur

				!isNaN(nowfloor) && (leftNavLis[nowfloor].className = "");

				nowfloor = NaN;

			}

		}





		//左侧导航li的监听

		for(var i = 0 ; i < leftNavLis.length ; i++){

			leftNavLis[i].index = i;

			leftNavLis[i].onclick = function(){

				idx = this.index;

				scrollAnimate(floorOffsetTopArr[this.index],600);

			}

		}

			



		//窗口动画函数

		function scrollAnimate(target,time){

			var frameNumber = 0;	//帧编号

			var start = document.body.scrollTop || document.documentElement.scrollTop;	 //起点

			var distance = target - start;

			var interval = 10;

			var maxFrame = time / interval;



			clearInterval(timer);

			var timer = setInterval(function(){

				frameNumber++;

				if(frameNumber == maxFrame){

					clearInterval(timer);

				}

				//第一个参数t表示当前帧编号

				//第二个参数b表示起始位置

				//第三个参数c表示变化量

				//第四个参数d表示总帧数

				//返回当前帧应该在哪儿

				document.body.scrollTop = document.documentElement.scrollTop = CubicEaseInOut(frameNumber,start,distance,maxFrame);

			},10);



			

		    function CubicEaseInOut(t, b, c, d) {

		        if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;

		        return c / 2 * ((t -= 2) * t * t + 2) + b;

		    }

		}

	</script>

</body>
2019-05-21 12:35:43
点赞只看楼主引用举报楼主收起
展开阅读全文