具有間歇效果的新聞列表垂直滾動程式碼

admin發表於2017-03-09

很多網站都具有這樣的效果，新聞列表能夠垂直不間斷滾動，並且具有間歇效果，就是每滾動一行能夠暫停一定時間，這樣不但能夠體現動態效果，而且能夠便於瀏覽者檢視新聞。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li {
list-style:none;
height:30px;
line-height:30px;
width:300px;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function () { 
  var scrollTimer = null; 
  var delay = 2000;
  $('div.scrollNews').hover(function () { 
    clearInterval(scrollTimer); 
  }, function () { 
    scrollTimer = setInterval(function () { 
      scrollNews(); 
    }, delay); 
  }).triggerHandler('mouseout'); 
});
 
function scrollNews() { 
  var $news = $('div.scrollNews>ul'); 
  var $lineHeight = $news.find('li:first').height(); 
  $news.animate({ 'marginTop': -$lineHeight + 'px' }, 600, function () { 
    $news.css({ margin: 0 }).find('li:first').appendTo($news); 
  }); 
} 
</script>
</head>
<body>
<div class="scrollNews" style="width:350px;">
  <ul>
    <li><a href="#" class="tooltip" title="螞蟻部落歡迎您.">螞蟻部落歡迎您.</a></li>
    <li><a href="#" class="tooltip" title="努力奮鬥才會有美好的前途.">努力奮鬥才會有美好的前途.</a></li>
    <li><a href="#" class="tooltip" title="沒有人一開始就是高手.">沒有人一開始就是高手.</a></li>
    <li><a href="#" class="tooltip" title="只有當前才是真實的.">只有當前才是真實的.</a></li>
    <li><a href="#" class="tooltip" title="每一天都是新的好好珍惜.">每一天都是新的好好珍惜.</a></li>
    <li><a href="#" class="tooltip" title="時間都是擠出來的.">時間都是擠出來的.</a></li>
    <li><a href="#" class="tooltip" title="互助和分享是一個人胸懷的體現.">互助和分享是人胸懷的體現.</a></li>
  </ul>
</div>
</body>
</html>

以上程式碼實現了我們的要求，下面介紹一下此功能的實現過程。

一.程式碼註釋:

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

2.var scrollTimer = null，宣告一個變數用來作為定時器函式的返回值。

3.var delay = 2000，滾動間隔時間。

4.$('div.scrollNews').hover()，規定滑鼠懸浮和離開要執行的函式。

5.clearInterval(scrollTimer)，滑鼠懸浮時候停止滾動效果。

6.scrollTimer = setInterval(function () {scrollNews(); }, delay)，每隔指定的事件執行一次函式scrollNews()。

7.triggerHandler('mouseout')，觸發mouseout事件其實也就是執行hover規定的第二個函式，因為hover其實是由mouseover和mouseout組成的。

8.function scrollNews() { }核心滾動程式碼。

9.var $news = $('div.scrollNews>ul')，獲取ul元素物件。

10.var $lineHeight = $news.find('li:first').height()，獲取第一個li元素的高度。

11.$news.animate({ 'marginTop': -$lineHeight + 'px' }, 600, function () { $news.css({ margin: 0 }).find('li:first').appendTo($news); }); ，首先以動畫方式設定ul的margin-top屬性值為負的第一個li的高度，回撥函式的功能是ul元素的margin-top重置為0，並且將當前第一個li放到ul的最後位置。

二.相關閱讀:

1.hover事件可以參閱jQuery hover事件一章節。

2.clearInterval()函式可以參閱 clearInterval()一章節。

3.setInterval()函式可以參閱setInterval()一章節。

4.find()函式可以參閱jQuery find()一章節。

5.height()函式可以參閱jQuery height()一章節。

6.animate()函式可以參閱jQuery animate()一章節。

7.appendTo()函式可以參閱jQuery appendTo()一章節。

相關文章