快捷導(dǎo)航

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

更新時(shí)間：2017年01月18日 11:28:41 作者：秋天1014童話(huà)

這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)屏幕滾動(dòng)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

屏幕滾動(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>

效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS計(jì)算網(wǎng)頁(yè)停留時(shí)間代碼
這篇文章主要介紹了JS計(jì)算網(wǎng)頁(yè)停留時(shí)間的具體實(shí)現(xiàn),需要的朋友可以參考下
2014-04-04
JavaScript手風(fēng)琴頁(yè)面制作
這篇文章主要為大家詳細(xì)介紹了JavaScript手風(fēng)琴頁(yè)面的制作代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
Bootstrap媒體對(duì)象的實(shí)現(xiàn)
在web頁(yè)面中，圖片居左，內(nèi)容居右排列，是非常常見(jiàn)的效果，它也就是媒體對(duì)象，它是一種抽象的樣式，可以用來(lái)構(gòu)建不同類(lèi)型的組件。本文給大家介紹Bootstrap媒體對(duì)象的實(shí)現(xiàn)，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05
js實(shí)現(xiàn)錄音上傳功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)錄音上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
JS圖片左右無(wú)縫隙滾動(dòng)的實(shí)現(xiàn)(兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn))
下面小編就為大家?guī)?lái)一篇JS圖片左右無(wú)縫隙滾動(dòng)的實(shí)現(xiàn)(兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
javascript 數(shù)組排序函數(shù)sort和reverse使用介紹
reverse方法將一個(gè)Array對(duì)象中的元素位置進(jìn)行反轉(zhuǎn)，sort方法返回一個(gè)元素已經(jīng)進(jìn)行了排序的 Array 對(duì)象，下面為大家介紹下
2013-11-11
JS畫(huà)布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國(guó)背景效果
這篇文章主要為大家詳細(xì)介紹了JS畫(huà)布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國(guó)背景效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
JS繼承實(shí)現(xiàn)方法及優(yōu)缺點(diǎn)詳解
這篇文章主要介紹了JS繼承實(shí)現(xiàn)方法及優(yōu)缺點(diǎn)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
JS實(shí)現(xiàn)的視頻彈幕效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的視頻彈幕效果,涉及javascript基于事件響應(yīng)的頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-08-08
JavaScript中的this使用詳解
this是javascript的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。但是總有一個(gè)原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。今天我們就來(lái)詳細(xì)探討下this的使用
2016-07-07