JS 楼层跳跃

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}
	body,html {
	height: 100%;
	}
	ul {
	list-style: none;
	height: 100%;
	}
	ul li {
	height: 100%;
	}
	ol {
	list-style: none;
	position: fixed;
	top: 80px;
	left: 50px;
	}
	ol li {
	width: 50px;
	height: 50px;
	border: 1px solid #000;
	text-align: center;
	line-height: 50px;
	margin-top: -1px;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<ul>
	<li>鞋子区域</li>
	<li>袜子区域</li>
	<li>裤子区域</li>
	<li>裙子区域</li>
	<li>帽子区域</li>
	</ul>
	<ol>
	<li>鞋子</li>
	<li>袜子</li>
	<li>裤子</li>
	<li>裙子</li>
	<li>帽子</li>
	</ol>

	<script src="animate.js"></script>
	<script>
	//需求：点击ol中的li，屏幕滑动到对应的ul中的li的范围。
	//思路：还是利用window.scrollTo();利用缓动动画原理实现屏幕滑动。
	//步骤：
	//0.获取元素
	//1.指定ul和ol中的li的背景色，对应的li背景色相同
	//2.老三步。(获取元素并绑定事件)
	//3.利用缓动动画原理实现屏幕滑动
	//4.用scroll事件模拟盒子距离最顶端的距离。

	//0.获取元素
	var ul = document.getElementsByTagName("ul")[0];
	var ol = document.getElementsByTagName("ol")[0];
	var ulLiArr = ul.children;
	var olLiArr = ol.children;
	var target = 0;var leader = 0;var timer = null;
	//1.指定ul和ol中的li的背景色，对应的li背景色相同
	//设置一个数组，里面装颜色，然指定的颜色给数组中的指定元素
	var arrColor = ["pink","blue","yellow","orange","green"];
	//利用for循环给两个数组的元素上色
	for(var i=0;i<arrColor.length;i++){
	//上色
	ulLiArr[i].style.backgroundColor = arrColor[i];
	olLiArr[i].style.backgroundColor = arrColor[i];


	//属性绑定索引值
	olLiArr[i].index = i;
	//2.老三步。(并绑定事件)循环绑定，为每一个li绑定点击事件
	olLiArr[i].onclick = function () {
	//***获取目标位置
	//获取索引值。
	target = ulLiArr[this.index].offsetTop;

	//要用定时器，先清除定时器
	clearInterval(timer);
	//3.利用缓动动画原理实现屏幕滑动
	timer = setInterval(function () {
	//(1).获取步长
	var step = (target-leader)/10;
	//(2).二次处理步长
	step = step>0?Math.ceil(step):Math.floor(step);
	//(3).屏幕滑动
	leader = leader + step;
	window.scrollTo(0,leader);
	//(4).清除定时器
	if(Math.abs(target-leader)<=Math.abs(step)){
	window.scrollTo(0,target);
	clearInterval(timer);
	}
	},25);
	}
	}

	//4.用scroll事件模拟盒子距离最顶端的距离。
	window.onscroll = function () {
	//每次屏幕滑动，把屏幕卷去的头部赋值给leader,模拟获取显示区域距离顶部的距离
	leader = scroll().top;
	}

	</script>


	</body>
	</html>

猜你喜欢