溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2021-04-12 10:58:32 來源：億速云 閱讀：249 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)基于JavaScript實(shí)現(xiàn)屏幕滾動(dòng)效果的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

屏幕滾動(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; // 核心語句
     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>首頁</li>
 <li>關(guān)注</li>
 <li>動(dòng)態(tài)</li>
 <li>風(fēng)格</li>
 <li>作品</li>
</ul>
<ol id="ol">
 <li>首頁</li>
 <li>關(guān)注</li>
 <li>動(dòng)態(tài)</li>
 <li>風(fēng)格</li>
 <li>作品</li>
</ol>
</body>
</html>

效果：

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

關(guān)于“基于JavaScript實(shí)現(xiàn)屏幕滾動(dòng)效果的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手