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>
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论