 
(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, //卷動速度，數(shù)值越大，速度越慢（毫秒 
_this.timespan=opt.timespan?parseInt(opt.timespan,13):5000; //滾動的時間間隔（毫秒 
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:一次卷動的文本行數(shù)
speed:卷動動畫的時間
timespan:間隔時間

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