新聞公告具有時間間隔垂直滾動程式碼

admin發表於2017-11-01

一般企業網站都有公告功能模組，有些公告新聞是橫向的，有的是垂直的，本章節就通過一個例項介紹一下如何實現具有時間間隔的垂直滾動程式碼，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>新聞公告具有時間間隔垂直滾動程式碼-螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
li {
  list-style:none;
}
#callboard {
  width:600px;
  margin:100px auto 0;
  height:24px;
  line-height:24px;
  overflow:hidden;
  font-size:12px;
  background-color:#f5f5f5;
}
#callboard ul {
  padding:0;
}
#callboard li {
  padding:0;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
(function (win){ 
  var callboarTimer; 
  var callboard=$('#callboard'); 
  var callboardUl=callboard.find('ul'); 
  var callboardLi=callboard.find('li'); 
  var liLen=callboard.find('li').length; 
  var initHeight=callboardLi.first().outerHeight(true); 
  win.autoAnimation=function(){ 
    if(liLen<=1) {
      return;
    } 
    var self=arguments.callee; 
    var callboardLiFirst=callboard.find('li').first(); 
    callboardLiFirst.animate({ 
      marginTop:-initHeight 
    }, 500, function (){ 
      clearTimeout(callboarTimer); 
      callboardLiFirst.appendTo(callboardUl).css({marginTop:0}); 
      callboarTimer = setTimeout(self, 5000); 
    })
  } 
  callboard.mouseenter( 
   function (){ 
     clearTimeout(callboarTimer); 
   }).mouseleave(function (){ 
     callboarTimer = setTimeout(win.autoAnimation, 5000); 
   }) 
}(window)); 
setTimeout(window.autoAnimation, 5000);  
})
</script>
</head>
<body>
<div id="callboard">
  <ul>
    <li> <span style="color:red;">螞蟻部落歡迎您</span> </li>
    <li> <span style="color:red;">每一天都是新的，請珍惜</span> </li>
    <li style="margin-top: 0px;">只有奮鬥才會有美好的明天</li>
  </ul>
</div>
</body>
</html>

以上程式碼實現了我們想要的效果，下面就介紹一下它的實現過程。

一.實現原理:

autoAnimation通過animate調整ul元素中第一個li元素的margintop屬性值，調整的大小剛好是第一個li元素的高度，這樣第一個li元素就會向上滾動逐漸被隱藏，第二個li元素也會逐漸被顯示，然後再將第一個元素挪動到ul元素內部的最後面，通過setTimeout方法每5秒遞迴呼叫一次autoAnimation，這樣不斷的重複就實現滾動效果。

二.程式碼註釋:

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

（2）.(function(win){})(window)，建立並執行一個函式，引數為window物件。

（3）.var callboarTimer，宣告一個變數，用於儲存setTimeout()函式的返回值。

（4）.var callboard=$('#callboard')，獲取id屬性值為callboard'的物件。

（5）.var callboardUl=callboard.find('ul')，獲取callboard下的所有ul物件集合。

（6）.var callboardLi=callboard.find('li')，獲取callboard下的所有li物件集合。

（7）.var liLen=callboard.find('li').length，獲取li元素的數量。

（8）.var initHeight=callboardLi.first().outerHeight(true)，獲取第一個li元素的高度，外邊距計算在內。

（9）.win.autoAnimation=function(){}，此函式用來實現向上滾動效果。

（10）.if(liLen<=1){return;},如果li元素的個數小於等於1，那就不用滾動了。

（11）.var self=arguments.callee，將當前函式物件的引用賦值給self變數。

（12）.var callboardLiFirst=callboard.find('li').first()，獲取第一個li元素。

（13）. callboardLiFirst.animate({})，在500毫秒內調整margintop屬性值，這樣第一個li就會被隱藏，第二個li就會被顯示出來，在margin-top調整完畢之後，將第一個li元素位置放置於ul元素的內部的最後面,最後5秒之後再呼叫autoAnimation函式，以此往復迴圈，這樣就是先了不斷的滾動效果。

（14）.callboard.mouseenter(function(){clearTimeout(callboarTimer); })，註冊mouseenter事件處理函式，滑鼠放在div上滾動停止。

（15）.mouseleave(function (){ callboarTimer=setTimeout(win.autoAnimation, 5000); }) ,註冊mouseleave事件處理函式，當滑鼠離開時，繼續開始滾動。

（16）. setTimeout(window.autoAnimation,5000);  5秒後呼叫autoAnimation函式。

三.相關閱讀:

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

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

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

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

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

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

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

相關文章