 
(function($){ 
$.fn.extend({ 
RollTitle: function(opt,callback){ 
if(!opt) var opt={}; 
var _this = this; 
_this.timer = null; 
_this.lineH = _this.find("li:first").height(); 
_this.line=opt.line?parseInt(opt.line,15):parseInt(_this.height()/_this.lineH,10); 
_this.speed=opt.speed?parseInt(opt.speed,10):3000, //卷動(dòng)速度，數(shù)值越大，速度越慢（毫秒 
_this.timespan=opt.timespan?parseInt(opt.timespan,13):5000; //滾動(dòng)的時(shí)間間隔（毫秒 
if(_this.line==0) this.line=1; 
_this.upHeight=0-_this.line*_this.lineH; 
_this.scrollUp=function(){ 
_this.animate({ 
marginTop:_this.upHeight 
},_this.speed,function(){ 
for(i=1;i<=_this.line;i++){ 
_this.find("li:first").appendTo(_this); 
} 
_this.css({marginTop:0}); 
}); 
} 
_this.hover(function(){ 
clearInterval(_this.timer); 
},function(){ 
_this.timer=setInterval(function(){_this.scrollUp();},_this.timespan); 
}).mouseout(); 
} 
}) 
})(jQuery); 

調(diào)用方法：
line:一次卷動(dòng)的文本行數(shù)
speed:卷動(dòng)動(dòng)畫(huà)的時(shí)間
timespan:間隔時(shí)間

復(fù)制代碼代碼如下:

 
<html> 
<body> 
<ul id="RunTopic"> 
<li>文字1</li> 
<li>文字2</li> 
<li>文字3</li> 
<li>文字4</li> 
<li>文字5</li> 
</ul> 
</body> 
<script type="text/javascript"> 
$(document.body).ready(function(){ 
$("#RunTopic").RollTitle({line:1,speed:200,timespan:1500}); 
}); 
</script> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)文章圖片彈出放大效果
本文主要介紹jQuery實(shí)現(xiàn)文章圖片彈出放大效果的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-04-04
jQuery的初始化與對(duì)象構(gòu)建之淺析
之前本人的工作和學(xué)習(xí)多以原生js 為主，對(duì)jQuery 一直都不是很了解，但jQuery 作為當(dāng)今最優(yōu)秀的js 類(lèi)庫(kù)之一，必須是要花時(shí)間好好學(xué)習(xí)下的，今天正好蛋疼，讀了里面一些代碼
2011-04-04
jquery實(shí)現(xiàn)的省市區(qū)三級(jí)聯(lián)動(dòng)
在做項(xiàng)目的時(shí)候，我們經(jīng)常需要用到地址之類(lèi)的省市區(qū)三級(jí)聯(lián)動(dòng)的，今天就給大家分享一個(gè)非常簡(jiǎn)潔的省市區(qū)三級(jí)聯(lián)動(dòng)的代碼，基于jQuery，附上GIT地址，有需要的小伙伴可以直接拿走
2015-04-04
擴(kuò)展jquery實(shí)現(xiàn)客戶(hù)端表格的分頁(yè)、排序功能代碼
下面鏈接中是我用jQuery的擴(kuò)展來(lái)實(shí)現(xiàn)的表格分頁(yè)和排序，使用這個(gè)擴(kuò)展必須加上表頭<thead>和<tbody>標(biāo)簽，因?yàn)槲沂?通過(guò)<tbody>來(lái)進(jìn)行分頁(yè)的，要是不加thead，那么表頭也要作為分頁(yè)計(jì)算時(shí)的一個(gè)行了。
2011-03-03
jQuery無(wú)刷新上傳之uploadify3.1簡(jiǎn)單使用
本文主要介紹jQuery插件uploadify3.1的簡(jiǎn)單使用，希望能幫到大家，有需要的朋友可以參考一下。
2016-06-06
jquery中post方法用法實(shí)例
這篇文章主要介紹了jquery中post方法用法,以實(shí)例的形式分析了post方法的具體用法,并對(duì)相關(guān)的知識(shí)點(diǎn)及注意點(diǎn)進(jìn)行了較為深入的分析,需要的朋友可以參考下
2014-10-10
jQuery鼠標(biāo)事件匯總
鼠標(biāo)事件是指用戶(hù)在移動(dòng)鼠標(biāo)光標(biāo)或者點(diǎn)擊任意鼠標(biāo)鍵時(shí)觸發(fā)的事件,jQuery中封裝了基本上所有的鼠標(biāo)事件包括點(diǎn)擊,雙擊,移動(dòng)等鼠標(biāo)事件,下面我們就來(lái)看下這些事件的語(yǔ)法和用法
2015-08-08
jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)下拉菜單效果,通過(guò)jquery操作鼠標(biāo)事件及頁(yè)面樣式動(dòng)態(tài)變換實(shí)現(xiàn)該功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery插入節(jié)點(diǎn)和移動(dòng)節(jié)點(diǎn)用法示例(insertAfter、insertBefore方法)
這篇文章主要介紹了jQuery插入節(jié)點(diǎn)和移動(dòng)節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了insertAfter和insertBefore方法針對(duì)頁(yè)面元素節(jié)點(diǎn)操作的使用技巧,需要的朋友可以參考下
2016-09-09
用jQuery實(shí)現(xiàn)的模擬下拉框代碼
用jQuery制作模擬下拉框瀏覽器自帶的下拉框樣式不好看。在ie6下，下拉框的優(yōu)先級(jí)大于層，經(jīng)常導(dǎo)致下拉框顯示在層的上面。
2010-03-03