jQuery單行新聞標題向上滾動詳解

admin發表於2018-09-19
jQuery

本章節分享一段程式碼例項，它實現了單條新聞公告垂直輪播效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
a {
  text-decoration: none;
  color: inherit;
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
.scroll-txt {
  width: 350px;
  height: 30px;
  border: 1px solid #ccc;
  color: #484848;
  position: relative;
  overflow: hidden;
}
.scroll-txt .font-inner {
  position: absolute;
  left: 8px;
  top: 0;
}
.scroll-txt .font-inner li {
  height: 30px;
  line-height: 30px;
}
.scroll-txt .dot {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 18px;
  font-weight: bold;
}
.scroll-txt a:hover {
  color: #0C6796;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function() {
  var index = 0;
  var autoTimer = 0;
  var clickEndFlag = true;
 
  var oInner = $(".font-inner");
  var oLi = $(".font-inner li");
 
  oLi.eq(0).clone(true).appendTo(oInner);
 
  var liHeight = $(".scroll-txt").height();
 
  function tab() {
    oInner.stop().animate({
      top: -index * liHeight
    }, 400, function() {
      clickEndFlag = true;
      if (index == oLi.length) {
        oInner.css({
          top: 0
        });
        index = 0;
      }
    })
  }
 
  function next() {
    index++;
    tab();
  }
 
  function prev() {
    index--;
    if (index < 0) {
      index = oLi.size() - 1;
      oInner.css("top", -oLi.size() * liHeight);
    }
    tab();
  }
 
  $(".scroll-txt .gt").on("click", function () {
    if (clickEndFlag) {
      next();
      clickEndFlag = false;
    }
  });
 
  $(".scroll-txt .lt").on("click", function () {
    if (clickEndFlag) {
      prev();
      clickEndFlag = false;
    }
  });
 
  autoTimer = setInterval(next, 3000);
 
  $(".font-inner a").hover(function() {
    clearInterval(autoTimer);
  }, function() {
    autoTimer = setInterval(next, 3000);
  });
 
  $(".scroll-txt .lt,.scroll-txt .gt").hover(function() {
    clearInterval(autoTimer);
  }, function() {
    autoTimer = setInterval(next, 3000);
  });
});                
</script>
</head>
<body>
  <div class="scroll-txt">
    <ul class="font-inner">
      <li><a href="#">1、螞蟻部落歡迎您，奮鬥才有美好未來</a></li>
      <li><a href="#">2、本站的url地址是www.softwhy.com</a></li>
      <li><a href="#">3、沒有人一開始是高手，必須要通過努力</a></li>
      <li><a href="#">4、每一天都是新的，要好好把握</a></li>
      <li><a href="#">5、當前時間才是真切的，下一秒也是虛幻</a></li>
    </ul>
    <div class="dot">
      <a href="javascript:void(0)" class="lt"><</a>
      <a href="javascript:void(0)" class="gt">></a>
    </div>
  </div>
</body>
</html>

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

一.程式碼註釋:

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

（2）.var index = 0，宣告一個變數並賦值為0，具體用法下面會有介紹。

（3）.var autoTimer = 0，宣告一個變數，用作定時器函式的返回值。

（4）.var clickEndFlag = true，宣告一個變數，用作當前動畫是否執行完畢的標識。

（5）.var oInner = $(".font-inner")，獲取class屬性值為font-inner的元素集合，當然這裡只有一個元素。

（6）. var oLi = $(".font-inner li")，獲取font-inner下的所有li元素集合。

（7）.oLi.eq(0).clone(true).appendTo(oInner)，將li元素集合中的第一個li元素拷貝一份放在列表的末尾，這個很有用處，比如當第五個li元素向上滾動的時候，不會出現底部是空白的現象，而是形成一種連續滾動的效果。

（8）.var liHeight = $(".scroll-txt").height()，獲取scroll-txt的高度，li元素也是這個高度。

（9）.function tab() {}，此函式實現了上下輪播效果。

（10）.oInner.stop().animate({  top: -index * liHeight

}, 400, function() {

  clickEndFlag = true;

  if (index == oLi.length) {

    oInner.css({

      top: 0

    });

    index = 0;

  }

})，以動畫方式設定元素的top值。

動畫執行完成，那麼就將clickEndFlag識別符號設定為true。

如果當前index值等於oLi.length，在本例中是5，那說明當前顯示的是最後動態新增的li元素，也就可以將top屬性值設定為0，然後將index值設定為0。

（11）.function next() {

  index++;

  tab();

}，向上輪播時候執行的函式。

（12）.function prev() {

  index--;

  if (index < 0) {

    index = oLi.size() - 1;

    oInner.css("top", -oLi.size() * liHeight);

  }

  tab();

}，向下輪播時執行的函式。

（13）.$(".scroll-txt .gt").on("click", function () {

   if (clickEndFlag) {

     next();

    clickEndFlag = false;

  }

})，註冊click事件處理函式。

當動畫執行完畢，才能夠執行下一個輪播動畫，連續的點選是無效的。

（14）.autoTimer = setInterval(next, 3000)，每隔3秒輪播一次。

（15）. $(".font-inner a").hover(function() {

  clearInterval(autoTimer);

}, function() {

  autoTimer = setInterval(next, 3000);

})，滑鼠懸浮，停止當前輪播，當滑鼠離開繼續輪播效果。

二.相關閱讀:

（1）.eq()可以參閱jQuery eq()一章節。

（2）.clone()可以參閱jQuery clone()一章節。

（3）.appendTo()可以參閱appendTo()一章節。

（4）.animate()可以參閱jQuery animate()一章節。

（5）.setInterval()可以參閱setInterval()一章節。

（6）.hover()可以參閱jQuery hover 事件一章節。

相關文章