jQuery 網站公告上下輪播

admin發表於2019-01-18
jQuery網站

分享一段非常實用的程式碼例項，它實現了網站的公告文字實現上下翻滾效果，並且在每完成一次翻滾之後都有暫停效果，程式碼例項如下:

[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;
}
.scrollNews{
  width:100%;
  height:20px;
  overflow:hidden;
  background:#ffffff;
  border:0px solid #aaaaaa;
}
.scrollNews ul{
  padding:2px 5px 5px 25px;
}
.scrollNews ul li{
  height:20px;
  list-style-type:none;
  font-size:small;
}
a{
  text-decoration:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  var settime;
  $(".scrollNews").hover(function(){
    clearInterval(settime);
  }, function(){
    settime=setInterval(function(){
      var $first=$(".scrollNews ul:first");
      var height=$first.find("li:first").height();
      $first.animate({"marginTop":-height + "px" },600,function(){
        $first.css({ marginTop: 0 }).find("li:first").appendTo($first);
      });
    },3000);
  }).trigger("mouseleave");
});
</script>
</head>
<body>
<div class="scrollNews">
  <ul>
    <li><a class="tooltip">螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來。</a></li>
    <li><a class="tooltip">本站的地址是softwhy.com，歡迎提出有益的建議和意見。</a></li>
  </ul>
</div>
</body>
</html>

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

一.程式碼註釋:

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

（2）.var settime，此變數用來儲存定時器方法的返回值，也就是它的標識。

（3）.$(".scrollNews").hover()，此函式可以註冊滑鼠懸浮和滑鼠離開兩個事件處理函式。

（4）.$(".scrollNews").hover(function(){

  clearInterval(settime);

},當滑鼠懸浮的時候就會停止定時器方法的執行，這樣就停止滾動效果。

（5）.function(){

  settime=setInterval(function(){

    var $first=$(".scrollNews ul:first");

    var height=$first.find("li:first").height();

    $first.animate({"marginTop":-height + "px" },600,function(){

      $first.css({ marginTop: 0 }).find("li:first").appendTo($first);

    });

  },3000);

})，當滑鼠離開的時候就會重新開始滾動效果。

settime=setInterval(function(){},3000)，使用定時器方法規定每隔3秒滾動一次。

var $first=$(".scrollNews ul:first")，class屬性值為scrollNews 元素下的第一個ul元素。

var height=$first.find("li:first").height()，獲取ul元素下第一個li元素的高度。

$first.animate({"marginTop":-height + "px" },600,function(){

  $first.css({ marginTop: 0 }).find("li:first").appendTo($first);

})，以動畫方式設定ul元素的上外邊距，第一次是負數，也就是讓元素上移，這就是上滾效果。

然後再將ul的上外邊距恢復為零（這時候是瞬間完成的，不是動畫方式），並且將第一個li元素挪動到尾部。

以此往復進行就可以實現不間斷滾動效果。

（6）.trigger("mouseleave")，觸發mouseleave事件，很多人可能不知道此事件處理函式在哪裡註冊的，其實是hover()註冊的。

二.相關閱讀:

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

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

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

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

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

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

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

相關文章