jQuery 圖片列表垂直間歇無縫滾動

admin發表於2019-01-24
jQuery

本章節分享一段程式碼例項，它實現了圖片垂直無縫滾動效果，當然這裡的圖片是使用li元素替代。

並且具有一定的時間間隔，比較適合用於放置廣告或者產品。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
ul li {
  list-style: none;
}
.wrap {
  margin: 0 auto;
  width: 1024px;
  height: 150px;
  overflow: hidden;
}
.wrap ul {
  height: 55px;
}
.wrap ul li {
  width: 120px;
  height: 50px;
  border: 2px solid red;
  float: left;
  margin-right: 10px;
  text-align: center;
  color: white;
  font: normal 16px/1.5 "microsoft yahei";
}
.list1 li {
  background: black;
}
.list2 li {
  background: grey;
}
.list3 li {
  background: lightgrey;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
  var scrollListUp = function (list_id, height) {
    var _scrollList = $('#' + list_id);
    var _scrollHeight = height;
    var scrollList = function () {
      _scrollList.animate({
        'margin-top': '-' + _scrollHeight
      }, function () {
        _scrollList.css({
          'margin-top': '1px' 
        });
        _scrollList.find('ul:lt(1)').appendTo(_scrollList);
      })
    }
    var timer = setInterval(scrollList, 2000); 
    _scrollList.mouseenter(function () {
      clearInterval(timer);
    })
    _scrollList.mouseleave(function () {
    timer = setInterval(scrollList, 2000);
  })
}
scrollListUp('j-media-list', 65);
})
</script>
</head>
<body>
  <div class="wrap">
    <div class="container" id="j-media-list">
      <ul class="list1">
        <li>螞蟻部落一</li>
        <li>螞蟻部落二</li>
        <li>螞蟻部落三</li>
        <li>螞蟻部落四</li>
      </ul>
      <ul class="list2">
        <li>螞蟻部落五</li>
        <li>螞蟻部落六</li>
        <li>螞蟻部落七</li>
        <li>螞蟻部落八</li>
      </ul>
      <ul class="list3">
        <li>螞蟻部落九</li>
        <li>螞蟻部落十</li>
        <li>螞蟻部落十一</li>
        <li>螞蟻部落十二</li>
      </ul>
    </div>
  </div>
</body>
</html>

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

一.程式碼註釋:

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

（2）.var scrollListUp = function (list_id, height) {}，實現了滾動效果，第一個引數是滾動元素的id，第二個引數規定滾動的尺寸。

（3）.var _scrollList = $('#' + list_id)，獲取指定的元素。

（4）.var _scrollHeight = height，將滾動的尺寸賦值給變數_scrollHeight。

（5）.var scrollList = function () {}，此函式實現了以動畫方式進行上下滾動。

（6）._scrollList.animate({

  'margin-top': '-' + _scrollHeight

}, function () {

  _scrollList.css({

    'margin-top': '1px' //將滾動的div重新定位，若不定位，將失去滾動效果

  });

  _scrollList.find('ul:lt(1)').appendTo(_scrollList);

})，'margin-top': '-' + _scrollHeight，設定上邊距負值，說明是向上滾動。

當動畫指定完畢之後，就會執行回撥函式，重置div的上邊距。

最後將列表中的第一個ul元素移動到列表的底部。

（7）.var timer = setInterval(scrollList, 2000)，每隔2秒進行一次滾動。

（8）._scrollList.mouseenter(function () {

  clearInterval(timer);

})，滑鼠移入，就會停止滾動。

（9）._scrollList.mouseleave(function () {

    timer = setInterval(scrollList, 2000);

})，滑鼠離開，重新進行滾動。

二.相關閱讀:

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

（2）.find()函式可以參閱jQuery find()一章節。 

（3）.:lt可以參閱jQuery :lt一章節。

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

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

（6）.mouseenter可以參閱jQuery mouseenter事件一章節。

（7）.clearInterval()可以參閱clearInterval()一章節。

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

相關文章