基于JavaScript實(shí)現(xiàn)屏幕滾動(dòng)效果

2019-11-19 17:53:13

字體：大中小

供稿：網(wǎng)友

屏幕滾動(dòng)效果：

<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; // 記錄當(dāng)前的索引號(hào)    olBoxLi[i].onclick = function() {     clearInterval(timer);     target = ulBoxLi[this.index].offsetTop; // 核心語(yǔ)句     timer = setInterval(function() {      leader = leader + (target - leader ) /10;      window.scrollTo(0,leader); // 屏幕滑動(dòng)      //pic.style.left = leader + 'px';     },30)    }   }  } </script></head><body><ul id="ul"> <li>首頁(yè)</li> <li>關(guān)注</li> <li>動(dòng)態(tài)</li> <li>風(fēng)格</li> <li>作品</li></ul><ol id="ol"> <li>首頁(yè)</li> <li>關(guān)注</li> <li>動(dòng)態(tài)</li> <li>風(fēng)格</li> <li>作品</li></ol></body></html>

效果：