jQuery具有暫停功效果新聞列表向上滾動

admin發表於2017-10-31
jQuery

新聞列表向上滾動效果在實際網站建設中非常的常用，一般用以對新聞的展示。

下面就簡單介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>新聞列表向上滾動程式碼例項-螞蟻部落</title>
<style type="text/css">
ui,li { 
  list-style:none; 
  font-size:12px;
} 
#news{ 
  height:57px; 
  overflow:hidden; 
} 
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  var $this=$("#news"); 
  var scrollTimer; 
  $this.hover(function(){ 
    clearInterval(scrollTimer); 
  },function(){ 
    scrollTimer = setInterval(function() { 
      scrollNews($this); 
    }, 2000); 
  }).trigger("mouseleave");
  function scrollNews(obj) 
  { 
   var $self=obj.find("ul"); 
   var lineHeight=$self.find("li:first").height(); 
   $self.animate({ 
    "marginTop":-lineHeight+ "px" 
   }, 600, function(){ 
   $self.css({ 
       marginTop:0 
     }).find("li:first").appendTo($self); 
   })
  } 
}) 
</script> 
<body> 
<div id="news"> 
  <ul> 
    <li><a href="#">螞蟻部落歡迎您</a></li> 
    <li><a href="#">只有努力奮鬥才會有美好的未來</a></li> 
    <li><a href="#">沒有人一開始就是高手</a></li> 
    <li><a href="#">每一天的太陽都是新的，好好珍惜眼前的一切</a></li> 
    <li><a href="#">明天是不存在的，所以把握好今天</a></li> 
    <li><a href="#">分享的精神和互助的胸懷是人進步的原動力</a></li> 
    <li><a href="#">樂觀的心態是最重要的</a></li> 
  </ul> 
</div> 
</body> 
</html>

新聞列表可以不斷的向上滾動，並且具有暫停效果，這有助於瀏覽器看清新聞，比較人性化，下面就介紹一下此特效的實現過程。

一.實現原理:

hover事件實際上是由mouseleave事件和mouseout事件組合而成的。在程式碼中為#news元素註冊hover事件處理函式，當文件結構載入完成之後，就會通過trigger()函式觸發mouseleave事件，那麼就會執行hover()第二個引數函式，此函式可以通過定時器函式setInterval()每隔兩秒就會執行一次scrollNews()函式，scrollNews()函式每執行一次都會首先將ul的margin-top屬性值減少lineHeight，lineHeight值恰好是一個li元素的高度，這樣就實現了新聞列表每一次滾動的幅度都是一條新聞，然後再將ul的margin-top屬性值設定為0，與此同時將原有的第一條新聞放到新聞列表的後部。這樣就是先了帶有暫停功能的無間斷滾動效果。

二.程式碼註釋:

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

（2）.var $this=$("#news")，獲取id屬性值為news的物件並將引用賦值給變數$this。

（3）.var scrollTimer，宣告一個變數用以存放定時器函式setInterval()的返回值。

（4）. $this.hover()，為$this引用物件註冊hover事件處理函式。

（5）.clearInterval(scrollTimer)，停止定時器函式的執行，也就是當滑鼠放在div上的時候會停止滾動效果。

（6）. scrollTimer=setInterval(function(){scrollNews($this); },2000)，當滑鼠厲害div的時候就會執行hover的第二個函式，也就會執行這段程式碼，通過定時器函式每隔兩秒執行一次scrollNews()函式。

（7）.trigger("mouseleave")，hover事件其實是由mouseleave事件和mouseout事件組合而成的，這裡使用trigger觸發mouseleave事件。

（8）.function scrollNews(obj){}，此函式是實現滾動的核心。

（9）.var $self=obj.find("ul")，獲取div下的ul物件。

（10）.var lineHeight=$self.find("li:first").height(),獲取第一個li元素的高度。

（11）.$self.animate()，以動畫方式設定ul的margin-top屬性值。

（12）."marginTop":-lineHeight+"px"，將margin-top屬性值設定為負的li元素高度，也就是向上移動一個li高度的尺寸。

（13）.$self.css({ marginTop:0 })，將ul元素的margin-top屬性值設定為0。

（14）.find("li:first").appendTo($self)，將現在的第一個li元素移動到ul的結尾。

三.相關閱讀:

（1）.hover事件參閱jQuery hover事件一章節。

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

（3）.setInterval()參閱setInterval()一章節。

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

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

（6）.height()參閱jQuery height()方法一章節。

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

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

相關文章