亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery動(dòng)畫效果animate和scrollTop結(jié)合使用實(shí)例

 更新時(shí)間:2014年04月02日 10:03:45   作者:  
animate是jq的一個(gè)特效的函數(shù)方法,animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫。該方法通過CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。

CSS屬性值是逐漸改變的,這樣就可以創(chuàng)建動(dòng)畫效果。
只有數(shù)字值可創(chuàng)建動(dòng)畫(比如 "margin:30px")。
字符串值無法創(chuàng)建動(dòng)畫(比如 "background-color:red")。

復(fù)制代碼 代碼如下:
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

上面的代碼表示滾動(dòng)條跳到0的位置,頁(yè)面移動(dòng)速度是800。
結(jié)合scrollTop實(shí)用示例:
復(fù)制代碼 代碼如下:

jQuery(document).ready(function($){
 $('#shang').click(function(){
  $('html,body').animate({scrollTop: '0px'}, 800);
 });
 $('#comt').click(function(){
  $('html,body').animate({scrollTop:$('#comments').offset().top}, 800);
 });
 $('#xia').click(function(){
  $('html,body').animate({scrollTop:$('#footer').offset().top}, 800);
 });
});

表示點(diǎn)擊相關(guān)ID移動(dòng)到指定位置:
點(diǎn)擊ID為shang的元素,回到頂部;
點(diǎn)擊ID為comt的元素,回到ID為comments的位置;
點(diǎn)擊ID為xia的元素,回到底部;

相關(guān)文章

  • Jquery之Bind方法參數(shù)傳遞與接收的三種方法

    Jquery之Bind方法參數(shù)傳遞與接收的三種方法

    這篇文章主要介紹了Jquery的Bind方法參數(shù)傳遞與接收的三種方法,需要的朋友可以參考下
    2014-06-06
  • 基于jquery實(shí)現(xiàn)放大鏡效果

    基于jquery實(shí)現(xiàn)放大鏡效果

    大家在逛淘寶的時(shí)候,把鼠標(biāo)放在寶貝上就會(huì)放大,奇怪這種效果怎么實(shí)現(xiàn)的,下面小編就給大家分享基于jquery實(shí)現(xiàn)放大鏡效果,有需要的朋友可以參考下
    2015-08-08
  • jQuery Easyui 下拉樹組件combotree

    jQuery Easyui 下拉樹組件combotree

    項(xiàng)目中做角色授權(quán)時(shí),需要做一個(gè)下拉框帶樹結(jié)構(gòu)的 并且可以多選的組件,就想到了easyui的combotree,下面通過實(shí)例代碼給大家介紹下Easyui 下拉樹組件combotree
    2016-12-12
  • jQuery實(shí)現(xiàn)百葉窗焦點(diǎn)圖動(dòng)畫效果代碼分享(附源碼下載)

    jQuery實(shí)現(xiàn)百葉窗焦點(diǎn)圖動(dòng)畫效果代碼分享(附源碼下載)

    這篇文章主要介紹了jQuery實(shí)現(xiàn)百葉窗焦點(diǎn)圖動(dòng)畫效果代碼分享(附源碼下載)的相關(guān)資料,需要的朋友可以參考下
    2016-03-03
  • jquery提升性能最佳實(shí)踐小結(jié)

    jquery提升性能最佳實(shí)踐小結(jié)

    因?yàn)閖query的易用性,很多朋友使用jquery,但仍然需要注意的是性能的問題,下面是曾祥展特為大家整理的一些技巧。
    2010-12-12
  • jQuery圖片輪播滾動(dòng)切換代碼分享

    jQuery圖片輪播滾動(dòng)切換代碼分享

    這篇文章主要介紹了jQuery圖片輪播滾動(dòng)切換特效,圖片輪播效果特別適合做產(chǎn)品展示,感興趣的小伙伴可以參考下。
    2015-09-09
  • 使用jquery的ajax需要注意的地方dataType的設(shè)置

    使用jquery的ajax需要注意的地方dataType的設(shè)置

    沒有設(shè)置dataType:'json',就出現(xiàn)無法解析返回的data數(shù)據(jù),會(huì)把data當(dāng)作字符串處理,而不是json對(duì)象,記得以前是不用設(shè)dataType的,很奇怪,不知道是不是跟jquery版本有關(guān)系
    2013-08-08
  • 基于jquery的可多選的下拉列表框

    基于jquery的可多選的下拉列表框

    同事在網(wǎng)上的找的下拉列表框出現(xiàn)位置不對(duì)的和加載慢的BUG,反正多選下拉列表框?qū)崿F(xiàn)也很簡(jiǎn)單,與其看那些結(jié)構(gòu)混亂的代碼,不如自己重新實(shí)現(xiàn)一個(gè)
    2012-07-07
  • 對(duì)jQuary選擇器的全面總結(jié)

    對(duì)jQuary選擇器的全面總結(jié)

    下面小編就為大家?guī)硪黄獙?duì)jQuary選擇器的全面總結(jié)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-06-06
  • Jquery優(yōu)化效率 提升性能解決方案

    Jquery優(yōu)化效率 提升性能解決方案

    jQuery是目前非常流行的Javascript庫(kù)之一,隨著jQuery應(yīng)用程序的逐漸增多,其性能優(yōu)化問題是程序員們不可忽視的,我們知道在jQuery中最快的選擇器是ID選擇器,因?yàn)樗苯觼碜杂贘avaScript的getElementById()方法。
    2010-09-09

最新評(píng)論