Jquery如何實現無縫向上循環滾動列表的特效

小編給大家分享一下Jquery如何實現無縫向上循環滾動列表的特效，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

效果呈現

整個列表間隔設定的時間向上移動一個item的高度

html結構：

 <div class="slide-title">
  <span>title1</span>
  <span>title2</span>
  <span>title3</span>
 </div>
 <div class="slide-container"><!--css設置時，注意高度是顯示多少個item,如：item的高度是30px，顯示3個，高度則是 3*30 = 90px -->
  <ul class="slide-list js-slide-list">
   <li class="odd"><span>item1</span><span>item1</span><span>item1</span></li>
   <li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
   <li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
  </ul>
 </div>

實現思路：

獲得js-slide-list下第一個li元素的高度，對它的height或marginTop進行一個從有到無的動畫變化，代碼如下：

var doscroll = function(){
 var $parent = $('.js-slide-list');
 var $first = $parent.find('li:first');
 var height = $first.height();
 $first.animate({
  height: 0 //或者改成： marginTop: -height + 'px'
  }, 500, function() {// 動畫結束后，把它插到最后，形成無縫
  $first.css('height', height).appendTo($parent);
  // $first.css('marginTop', 0).appendTo($parent);
 });
};
setInterval(function(){doscroll()}, 2000);

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。

看完了這篇文章，相信你對“Jquery如何實現無縫向上循環滾動列表的特效”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！