基于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)文章

javascript函數(shù)報(bào)Uncaught?ReferenceError:?XXX?is?not?define
本文主要介紹了javascript函數(shù)報(bào)Uncaught?ReferenceError:?XXX?is?not?defined，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
ES6中l(wèi)et 和 const 的新特性
這篇文章主要介紹了ES6中l(wèi)et 和 const 的新特性，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-09-09
javascript筆試題目附答案@20081025_jb51.net
網(wǎng)上找的javascript筆試題目，留檔給自己作參考。
2008-10-10
javascript中的緩動(dòng)效果實(shí)現(xiàn)程序
javascript中的緩動(dòng)效果可以應(yīng)用于很多地方，比如距離位移上的變化：圖片的滾動(dòng)、焦點(diǎn)圖的輪轉(zhuǎn)切換，透明度上的變化：漸隱漸現(xiàn)。凡是存在運(yùn)動(dòng)的狀態(tài)都適用，下面以最基本的塊在容器內(nèi)從左到右滑動(dòng)為例，講下幾種不同的緩動(dòng)處理方式
2012-12-12
JavaScript如何將數(shù)據(jù)處理成樹(shù)形結(jié)構(gòu)
這篇文章主要介紹了JavaScript如何將數(shù)據(jù)處理成樹(shù)形結(jié)構(gòu)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
JavaScript六種常見(jiàn)的繼承方法分享
繼承是面向?qū)ο缶幊讨械囊粋€(gè)重要概念,它允許一個(gè)對(duì)象（子類(lèi)或派生類(lèi)）獲取另一個(gè)對(duì)象（父類(lèi)或基類(lèi)）的屬性和方法,在 JavaScript 中,有多種方式可以實(shí)現(xiàn)繼承,本文將給大家介紹六種常見(jiàn)的JavaScript繼承方法,需要的朋友可以參考下
2023-09-09
淺析JavaScript中預(yù)編譯的原理與流程
這篇文章主要為大家詳細(xì)介紹了JavaScript中預(yù)編譯的原理與流程的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們深入了解JavaScript有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-10-10
微信小程序?qū)崿F(xiàn)留言板功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)留言板功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
javascript設(shè)計(jì)模式接口介紹
最近在看javascript設(shè)計(jì)模式的書(shū)籍《pro javascript design pattrens》，覺(jué)得很不錯(cuò)，可以提高自己對(duì)js oo的理解，也可能幫助自己更好的理解別人寫(xiě)的js library，提高自己js的水平
2012-07-07
基于JavaScript實(shí)現(xiàn)交互式博客
在Web開(kāi)發(fā)中,JavaScript（JS）是一種至關(guān)重要的編程語(yǔ)言,它使網(wǎng)頁(yè)具有交互性,本文主要介紹了如何使用JavaScript實(shí)現(xiàn)一個(gè)交互式博客,需要的可以了解下
2024-01-01