欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)簡(jiǎn)單滾動(dòng)動(dòng)畫效果

 更新時(shí)間：2016年04月07日 08:50:06   作者：涼涼酒  
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單滾動(dòng)動(dòng)畫效果的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

動(dòng)畫的思路很簡(jiǎn)單，點(diǎn)擊頁(yè)面上一個(gè)元素，頁(yè)面滾動(dòng)到指定位置。下面介紹一下我3個(gè)小時(shí)百度的研究成果：

首先是html部分：

<html>
<body>
<a>頂部</a>
<a>中部</a>
...<p>持續(xù)添加直到出現(xiàn)滾動(dòng)條</p>...
</body>
</html>

先添加兩個(gè)<a>元素作為按鈕。然后對(duì)<a>元素進(jìn)行補(bǔ)充：

<html>
<body>
<a href="javascript:;" id="tab1">頂部</a>
<a href="javascript:;" id="tab2">中部</a>
...<p>持續(xù)添加直到出現(xiàn)滾動(dòng)條</p>...
</body>

href="javascript:;"大概意思是說(shuō)a元素可以激活js代碼。如果不加則代碼無(wú)效。使用<button>則無(wú)需添加。
接著引入jquery和寫入代碼：

<script src="js/jquery-1.10.2.min.js"></script>
<script>
  $(document).ready(function(){
    $("#tab1").click(function(){
      $("html,body").animate({scrollTop:'0px'},300);
    });
    $("#tab2").click(function(){
      $("html,body").animate({scrollTop:'600px'},300);
    });
  });
</script>

需要注意:

1、寫入的代碼最好在引入的jquery語(yǔ)句下方

2、id一定要和<a>元素對(duì)應(yīng)

3、"html,body"代表整體移動(dòng)

4、({scrollTop:'600px'},300);前面的數(shù)值是移動(dòng)距離，后面的數(shù)值是動(dòng)畫時(shí)間（單位是毫秒）

做到這一步代碼就能運(yùn)行了。

下面詳細(xì)的解析一下jquery代碼：

 $(document).ready(function(){
//這一句都要加，不加會(huì)出錯(cuò)，沒(méi)有實(shí)際作用


    $("#tab1").click(function(){
    //$("#tab1")是選擇器，click()是方法。意思是說(shuō)對(duì)#tab1使用click方法


      $("html,body").animate({scrollTop:'0px'},300);
      //我理解的scrollTop是個(gè)變量屬性，代表元素最頂端和當(dāng)前瀏覽器顯示區(qū)域上邊沿之間的距離，所以這句話的意思是：讓body的上邊沿和瀏覽器可視區(qū)域上邊沿距離為0px，結(jié)果就是回到頁(yè)面頂端。


    });
    ...
  });

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論