Jquery實現(xiàn)無縫向上循環(huán)滾動列表的特效
更新時間：2019年02月13日 08:47:36 作者：young_591693
今天小編就為大家分享一篇關于Jquery實現(xiàn)無縫向上循環(huán)滾動列表的特效，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
效果呈現(xiàn)
整個列表間隔設定的時間向上移動一個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>
實現(xiàn)思路：
獲得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通過寫入cookie實現(xiàn)更換網頁背景的方法
這篇文章主要介紹了jQuery通過寫入cookie實現(xiàn)更換網頁背景的方法,涉及jQuery結合cookie設置頁面元素屬性的相關操作技巧,需要的朋友可以參考下2016-04-04
2013-11-11
這篇文章主要介紹了Javascript中的Array數(shù)組對象,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了jquery實現(xiàn)帶縮略圖的全屏圖片畫廊效果,實例分析了jquery帶縮略圖的全屏效果圖片實現(xiàn)技巧,并附有完整的源碼下載,需要的朋友可以參考下2015-06-06
jquery 獲取自定義屬性(attr和prop)的實現(xiàn)代碼
jquery中用attr()方法來獲取和設置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經常用到attr()，attr()有4個表達式2012-06-06
這篇文章主要介紹了jQuery復合事件結合toggle()方法的用法,實例分析了toggle()方法的功能、定義以及與復合事件結合使用的操作技巧,需要的朋友可以參考下2017-06-06
jQuery 工具提示可以讓網站上一些小的幫助信息顯示更加直觀，提升用戶的體驗。2011-05-05
jQuery實現(xiàn)發(fā)送驗證碼并60秒倒計時功能
這篇文章主要介紹了jQuery實現(xiàn)發(fā)送驗證碼并60秒倒計時功能，非常不錯，代碼簡單易懂，需要的朋友參考下吧2016-11-11
jQuery easyUI datagrid 增加求和統(tǒng)計行的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query easyUI datagrid 增加求和統(tǒng)計行的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jQuery/$ is not defined報錯的幾種解決方法
jQuery最常見的錯誤之一是$ is not defined錯誤,本文主要介紹了jQuery/$ is not defined報錯的幾種解決方法,具有一定的參考價值,感興趣的可以了解一下2024-02-02