JS楼层跳跃代码实现
程序员文章站
2022-04-19 10:27:32
js楼层跳跃代码实现
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>