jQuery新聞列表垂直滾動詳解

admin發表於2018-11-28
jQuery

新聞列表垂直滾動效果，在很多網站都有應用。

下面是一段帶有滾動間歇暫停功能的程式碼，下面詳細介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript">
var AutoScroll=function(selector){ 
  $(selector).find("ul:first").animate({ 
    marginTop:"-20px" 
  },500,function(){ 
    $(this).css({ 
      marginTop:"0px" 
    }).find("li:first").appendTo(this) 
  }) 
} 
$(document).ready(function(){
  if($(".list ul li").length>0){ 
    setInterval('AutoScroll(".list")', 2000) 
  } 
  else{ 
    $(".list").hide() 
  } 
})
</script>
</head>
<body>
<div class="list">
  <ul>
    <li>螞蟻部落歡迎您的到來。</li>
    <li>只有努力奮鬥才會有美好的明天</li>
    <li>沒有人一開始就是高手，必須要靠努力。</li>
    <li>每一天都是新的請好好的珍惜。</li>
    <li>當前的時間最為可貴，下一秒都是虛幻的。</li>
    <li>沒有勞動的活著，沒有任何意義。</li>
    <li>實現自我價值才是人生的目的。</li>
  </ul>
</div>
</body>
</html>

程式碼實現了迴圈滾動效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var AutoScroll=function(selector){}，此函式實現了滾動效果。

（2）.$(selector).find("ul:first").animate({ 

  marginTop:"-20px" 

},500,function(){ 

  $(this).css({ 

    marginTop:"0px" 

  }).find("li:first").appendTo(this) 

})

$(selector).find("ul:first")可以獲取第一個ul元素，然後呼叫animate()利用動畫方式在500毫秒內設定ul元素的marginTop屬性值，設定完成以後再去執行回撥函式，將第一個li元素追加到ul元素的尾部。

（3）.$(document).ready(function(){})，文件結構完全載入完畢再去執行函式中的程式碼。

（4）.if($(".list ul li").length>0){setInterval('AutoScroll(".list")', 2000)}，如果具有li元素，那麼就每隔2秒執行一次'AutoScroll()函式。

（5）.else{$(".list").hide() } 如果沒有就隱藏class屬性值為list的元素。

二.相關閱讀:

（1）.find()方法參閱jQuery find()一章節。

（2）.animate()方法參閱jQuery animate()一章節。

（3）.appendTo()方法參閱jQuery appendTo()一章節。

（4）.setInterval()方法參閱setInterval()一章節。

相關文章