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

互联网 18-4-19

content begin

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

<!DOCTYPE html>  <html>  <head>   <title>楼层跳跃式的页面布局</title>   <meta charset="utf-8">   <style type="text/css">    *{     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:200px;     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>  </ul>  <ol>   <li>1</li>   <li>2</li>   <li>3</li>   <li>4</li>  </ol>  <script type="text/javascript" src="myScroll.js"></script>  <script type="text/javascript">   // 点击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>  </body>  </html>

myScroll.js

function scroll() {    // 开始封装自己的scrollTop   if(window.pageYOffset !== undefined) {     // ie9+ 高版本浏览器    // 因为 window.pageYOffset 默认的是0,所以需要判断    return {     left: window.pageXOffset,     top: window.pageYOffset    }   }   else if(document.compatMode === "CSS1Compat") {    // 标准浏览器,来判断有没有声明DTD    return {     left: document.documentElement.scrollLeft,     top: document.documentElement.scrollTop    }   }   return {    // 未声明 DTD    left: document.body.scrollLeft,    top: document.body.scrollTop   }  }

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

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

相关资讯

标签推荐