基于JavaScript实现屏幕滚动效果

2019-11-19 17:53:13

字体：大中小

来源：转载

供稿：网友

屏幕滚动效果：

<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style>  ul,ol {   list-style-type: none;  }  * {margin:0;padding:0;}  html,body {   width: 100%;   height: 100%;  }  #ul {   width: 100%;   height: 100%;  }  ul li{   width: 100%;   height: 100%;  }  #ol {   position: fixed;   top:0;   left:50px;  }  #ol li {   width: 50px;   height: 50px;   border: 1px solid #000;  } </style> <script src="my.js" type="text/javascript"></script> <script>  window.onload = function() {   var ulBox = $("ul");   var ulBoxLi = ulBox.children;   var olBox = $("ol");   var olBoxLi = olBox.children;   var bgColor = ["pink","purple","orange","blue","green"];   var leader = 0,target = 0,timer = null;   for(var i= 0; i<ulBoxLi.length; i++)   {    ulBoxLi[i].style.backgroundColor = bgColor[i];    olBoxLi[i].style.backgroundColor = bgColor[i];    olBoxLi[i].index = i; // 记录当前的索引号    olBoxLi[i].onclick = function() {     clearInterval(timer);     target = ulBoxLi[this.index].offsetTop; // 核心语句     timer = setInterval(function() {      leader = leader + (target - leader ) /10;      window.scrollTo(0,leader); // 屏幕滑动      //pic.style.left = leader + 'px';     },30)    }   }  } </script></head><body><ul id="ul"> <li>首页</li> <li>关注</li> <li>动态</li> <li>风格</li> <li>作品</li></ul><ol id="ol"> <li>首页</li> <li>关注</li> <li>动态</li> <li>风格</li> <li>作品</li></ol></body></html>

效果：