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