H5+C3+JS实现楼层跳跃特效

这次给大家带来H5+C3+JS实现楼层跳跃特效，H5+C3+JS实现楼层跳跃特效的注意事项有哪些，下面就是实战案例，一起来看一下。

 
• 第一区域
 
• 第二区域
 
• 第三区域
 
• 第四区域

 
1. 1
 
2. 2
 
3. 3
 
4. 4

<script></script><script> // 点击ol的li，屏幕滑动到对应的ul的li // 利用window.scrollTo()；缓动动画实现 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 = ["green","orange","yellow","red","gold"]; // 利用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(){ // (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); } // 用scroll事件模拟盒子距离最顶端的距离 window.onscroll = function(){ // 每次屏幕滑动，把屏幕卷去的值赋给leader，模拟获取显示区域距离顶部的距离 leader = scroll().top; } } </script>

  myScroll.js

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Echarts实现动态变色柱状图

jquery实现全选反选单选

jQuery操作背景颜色渐变动画效果

以上就是H5+C3+JS实现楼层跳跃特效的详细内容，更多请关注php中文网其它相关文章！