基于jQuery的上下無縫滾動應(yīng)用(單行或多行)
更新時間：2010年08月10日 21:11:12 作者：
基于jQuery的上下無縫滾動應(yīng)用,可應(yīng)用于多行或者單行.詳解請參考注釋.
核心jQuery代碼:
$(function(){
var _wrap=$('ul.line');//定義滾動區(qū)域
var _interval=2000;//定義滾動間隙時間
var _moving;//需要清除的動畫
_wrap.hover(function(){
clearInterval(_moving);//當(dāng)鼠標(biāo)在滾動區(qū)域中時,停止?jié)L動
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此變量不可放置于函數(shù)起始處,li:first取值是變化的
var _=_field.height();//取得每次滾動高度(多行滾動情況下,此變量不可置于開始處,否則會有間隔時長延時)
_field.animate({marginTop:-_h+'px'},600,function(){//通過取負(fù)margin值,隱藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隱藏后,將該行的margin值置零,并插入到最后,實現(xiàn)無縫滾動
})
},_interval)//滾動間隔時間取決于_interval
}).trigger('mouseleave');//函數(shù)載入時,模擬執(zhí)行mouseleave,即自動滾動
});
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
復(fù)制代碼 代碼如下:
$(function(){
var _wrap=$('ul.line');//定義滾動區(qū)域
var _interval=2000;//定義滾動間隙時間
var _moving;//需要清除的動畫
_wrap.hover(function(){
clearInterval(_moving);//當(dāng)鼠標(biāo)在滾動區(qū)域中時,停止?jié)L動
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此變量不可放置于函數(shù)起始處,li:first取值是變化的
var _=_field.height();//取得每次滾動高度(多行滾動情況下,此變量不可置于開始處,否則會有間隔時長延時)
_field.animate({marginTop:-_h+'px'},600,function(){//通過取負(fù)margin值,隱藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隱藏后,將該行的margin值置零,并插入到最后,實現(xiàn)無縫滾動
})
},_interval)//滾動間隔時間取決于_interval
}).trigger('mouseleave');//函數(shù)載入時,模擬執(zhí)行mouseleave,即自動滾動
});
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
BootStrap的table表頭固定tbody滾動的實例代碼
本文給大家分享一段關(guān)于BootStrap的table表頭固定tbody滾動的實例代碼,代碼簡單易懂，需要的朋友可以參考下2016-08-08
基于jquery獲取指定樣式的參數(shù)信息。2010-07-07
jQuery Easyui DataGrid點擊某個單元格即進(jìn)入編輯狀態(tài)焦點移開后保存數(shù)據(jù)
這篇文章主要介紹了jQuery Easyui DataGrid點擊某個單元格即進(jìn)入編輯狀態(tài)焦點移開后保存數(shù)據(jù)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
根據(jù)多個屬性選擇在某些對選擇比較精確的情況下，還是比較實用的，其實很簡單，不會的朋友看下本文2013-10-10
這篇文章主要介紹了jQuery中index()的用法分析,針對API示例進(jìn)行分析,給出了改進(jìn)方法的實例,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了jQuery 選擇符詳細(xì)介紹及整理的相關(guān)資料,這里整理了選擇符的一些資料，幫助到家學(xué)習(xí)這部分內(nèi)容，需要的朋友可以參考下2016-12-12
Checbox的操作包括已選、未選、判斷等等，下面有個不錯的示例，使用jquery完成，感興趣的朋友可以參考下2013-11-11
批量修改標(biāo)簽css樣式以input標(biāo)簽為例
本節(jié)主要介紹了jquery如何批量修改標(biāo)簽css樣式以input標(biāo)簽為例,需要的朋友可以參考下2014-07-07
今天我再來向大家介紹一款jquery圖表插件jqplot，下面是一些中文說明，希望對你有所幫助2012-02-02
這篇文章主要介紹了jquery實現(xiàn)pager控件示例,需要的朋友可以參考下2014-04-04