js实现整屏滑动效果

最新推荐文章于 2024-04-28 18:13:10 发布

devincob

最新推荐文章于 2024-04-28 18:13:10 发布

阅读量383

点赞数

分类专栏：拾遗

本文链接：https://blog.youkuaiyun.com/devincob/article/details/96743127

版权

拾遗专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <style>
       * {
           margin: 0;
           padding: 0;
       }


       ul, ol {
           list-style: none;
       }


       html, body, ul, ul li {
           width: 100%;
           height: 100%;
       }


       ol {
           position: fixed;
           top: 50px;
           left: 50px;
       }


       ol li {
           width: 50px;
           height: 50px;
           border: 1px solid #000;
           text-align: center;
           line-height: 50px;
           cursor: pointer;
       }
   </style>
</head>
<body>
<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>
<ol>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ol>
<!--ol>li{$}*5-->
<script>
   var timer = null;
   //var leader = 0;

   var ol = document.getElementsByTagName("ol")[0];
   var olLis = ol.children;
   var ul = document.getElementsByTagName("ul")[0];
   var ulLis = ul.children;


   var arr = ["red", "orange", "yellow", "green", "blue"];
   for (var i = 0; i < arr.length; i++) {
       olLis[i].style.backgroundColor = arr[i];
       ulLis[i].style.backgroundColor = arr[i];
   }


   /*window.onscroll = function () {
       leader = window.pageYOffset;//当前页面被卷去的头部
   };*/




   //给所有的olLis注册点击事件
   for (var j = 0; j < olLis.length; j++) {
       olLis[j].index = j;
       olLis[j].onclick = function () {
           //让窗体滚动到指定位置
           //就是要滚动到 要去的ul 的 offsetTop的值
           //当前点击的是ol中的哪个li 就去到ul中的那个li
           var target = ulLis[this.index].offsetTop;
           //window.scrollTo(0, target);
           //一个渐渐变化的值，引入计时器
           clearInterval(timer);
           timer = setInterval(function () {
               //step = (target - leader) / 10
               //leader = leader + step
               var leader = window.pageYOffset;//当前页面被卷去的头部
               var step = (target - leader) / 10;
               step = step > 0 ? Math.ceil(step) : Math.floor(step);
               leader = leader + step;
               //console.log(leader);
               window.scrollTo(0, leader);
               if (leader === target) {
                   clearInterval(timer);
               }
           }, 20);
       };
   }
</script>
</body>
</html>