Jquery實(shí)現(xiàn)無(wú)縫向上循環(huán)滾動(dòng)列表的特效

更新時(shí)間：2019年02月13日 08:47:36 作者：young_591693

今天小編就為大家分享一篇關(guān)于Jquery實(shí)現(xiàn)無(wú)縫向上循環(huán)滾動(dòng)列表的特效，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧

效果呈現(xiàn)

整個(gè)列表間隔設(shè)定的時(shí)間向上移動(dòng)一個(gè)item的高度

html結(jié)構(gòu)：

 <div class="slide-title">
  <span>title1</span>
  <span>title2</span>
  <span>title3</span>
 </div>
 <div class="slide-container"><!--css設(shè)置時(shí)，注意高度是顯示多少個(gè)item,如：item的高度是30px，顯示3個(gè)，高度則是 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>

實(shí)現(xiàn)思路：

獲得js-slide-list下第一個(gè)li元素的高度，對(duì)它的height或marginTop進(jìn)行一個(gè)從有到無(wú)的動(dòng)畫(huà)變化，代碼如下：

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() {// 動(dòng)畫(huà)結(jié)束后，把它插到最后，形成無(wú)縫
  $first.css('height', height).appendTo($parent);
  // $first.css('marginTop', 0).appendTo($parent);
 });
};
setInterval(function(){doscroll()}, 2000);

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

您可能感興趣的文章:

相關(guān)文章

jQuery通過(guò)寫(xiě)入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法
這篇文章主要介紹了jQuery通過(guò)寫(xiě)入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法,涉及jQuery結(jié)合cookie設(shè)置頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下
2016-04-04
jQuery Mobile 導(dǎo)航欄代碼
2013-11-11
Javascript中的Array數(shù)組對(duì)象詳談
這篇文章主要介紹了Javascript中的Array數(shù)組對(duì)象,需要的朋友可以參考下
2014-03-03
jquery實(shí)現(xiàn)帶縮略圖的全屏圖片畫(huà)廊效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶縮略圖的全屏圖片畫(huà)廊效果,實(shí)例分析了jquery帶縮略圖的全屏效果圖片實(shí)現(xiàn)技巧,并附有完整的源碼下載,需要的朋友可以參考下
2015-06-06
jquery 獲取自定義屬性(attr和prop)的實(shí)現(xiàn)代碼
jquery中用attr()方法來(lái)獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫(xiě)，在jQuery DOM操作中會(huì)經(jīng)常用到attr()，attr()有4個(gè)表達(dá)式
2012-06-06
jQuery復(fù)合事件結(jié)合toggle()方法的用法示例
這篇文章主要介紹了jQuery復(fù)合事件結(jié)合toggle()方法的用法,實(shí)例分析了toggle()方法的功能、定義以及與復(fù)合事件結(jié)合使用的操作技巧,需要的朋友可以參考下
2017-06-06
25個(gè)優(yōu)雅的jQuery Tooltip插件推薦
jQuery 工具提示可以讓網(wǎng)站上一些小的幫助信息顯示更加直觀，提升用戶的體驗(yàn)。
2011-05-05
jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計(jì)時(shí)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計(jì)時(shí)功能，非常不錯(cuò)，代碼簡(jiǎn)單易懂，需要的朋友參考下吧
2016-11-11
jQuery easyUI datagrid 增加求和統(tǒng)計(jì)行的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jQuery easyUI datagrid 增加求和統(tǒng)計(jì)行的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
jQuery/$ is not defined報(bào)錯(cuò)的幾種解決方法
jQuery最常見(jiàn)的錯(cuò)誤之一是$ is not defined錯(cuò)誤,本文主要介紹了jQuery/$ is not defined報(bào)錯(cuò)的幾種解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-02-02