JS之楼层跳跃
目的：达到像各个大型购物网站一样的楼层跳跃
需求:点击ol中的li，屏幕滑动到对应的ul中li范围
思路：还是利用window.scrollTo();利用缓动动画原理实现屏幕滑动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin: 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;
cursor: pointer;
text-align: center;
line-height: 50px;
}
</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 type="text/javascript" src=""></script>
<script type="text/javascript">
//需求:点击ol中的li，屏幕滑动到对应的ul中li范围
//思路：还是利用window.scrollTo();利用缓动动画原理实现屏幕滑动
//步骤：
//1.获取元素
//2.指定ul和ol中的li的背景色，对应的li背景色相同
//3.获取元素并绑定事件
//利用缓动动画原理实现屏幕滑动
//用scroll事件模拟盒子距离最顶端的距离
//获取元素
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;
//指定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;
//循环绑定，为每一个li绑定点击事件
olLiArr[i].onclick = function(){
//获取目标位置
//获取索引值
target = ulLiArr[this.index].offsetTop;
//要用定时器，先清定时器
clearInterval(timer);
//利用缓动动画原理实现屏幕滑动
timer = setInterval(function(){
//获取步长
var step = (target-leader)/10;
//二次处理步长
step = step>0?Math.ceil(step):Math.floor(step);
//屏幕滑动
leader = leader+step;
window.scrollTo(0,leader);
//清除定时器
if (Math.abs(target-leader)<=Math.abs(step)) {
window.scrollTo(0,target);
clearInterval(timer);
}
},25);
}
}
//用scroll事件模拟盒子距离最顶端的距离
window.onscroll = function(){
//每次屏幕滑动，把屏幕卷去的头部赋值给leader，模拟获取显示区域距离顶部的距离
leader = scroll().top;
}
</script>
</body>
</html>
