基于Jquery的文字滾動跑馬燈插件(一個頁面多個滾動區(qū))

更新時間：2010年07月26日 14:00:55 作者：

文字逐行或多行滾動跑馬燈插件，基于Jquery。命名為Jquery.RollTitle。支持在一個頁面聲明多個滾動區(qū) (就為了要這點才寫了這個)

兼容各瀏覽器的文本行高

 
(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:間隔時間

復制代碼代碼如下:

 
<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> 

您可能感興趣的文章:

jQuery關于導航條背景切換效果實現(xiàn)示例
導航條背景切換的效果，想必大家在瀏覽網(wǎng)頁時可能會碰到過，下面為大家介紹下使用jquery如何實現(xiàn)，具體思路及代碼如下，感興趣的朋友可以參考下
2013-09-09
使用Jquery實現(xiàn)每日簽到功能
簽到功能現(xiàn)在算是社交化網(wǎng)站增加網(wǎng)站粘合度的一個普遍做法了，于是也想在自己的項目中添加一個，經(jīng)過一番度娘，終于完成，這里分享給大家，有需要的小伙伴可以參考下。
2015-04-04
jQuery實現(xiàn)表格展開與折疊的方法
這篇文章主要介紹了jQuery實現(xiàn)表格展開與折疊的方法,涉及jQuery中toggleClass方法與鏈式操作的相關技巧,非常簡單實用,需要的朋友可以參考下
2015-05-05
Jq通過td獲取同行其它列td的方法
下面小編就為大家?guī)硪黄狫q通過td獲取同行其它列td的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
新手常遇到的一些jquery問題整理
最近在做項目的時候使用了Jquery~新手學習jquery.~遇到了一些"奇怪"的問題(各位大神別拍磚).感謝ClassYuan老大的支持
2010-08-08
Android中資源文件(非代碼部分)的使用概覽
Android中的資源是指非代碼部分，指外部文件，本文詳細介紹資源使用概覽，需要了解的朋友可以參考下
2012-12-12
JQuery控制圖片由中心點逐漸放大效果
這篇文章主要介紹了JQuery控制圖片由中心點逐漸放大效果的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
純JAVASCRIPT圖表動畫插件Highcharts Examples
官方提供免費的下載包以及詳細的文檔說明，非常的值得收藏。
2011-04-04
jQuery實現(xiàn)input輸入框獲取焦點與失去焦點時提示的消失與顯示功能示例
這篇文章主要介紹了jQuery實現(xiàn)input輸入框獲取焦點與失去焦點時提示的消失與顯示功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
jQuery.Form上傳文件操作
這篇文章主要介紹了jQuery.Form上傳文件操作,首先需要我們先建立test文件夾，具體代碼內(nèi)容大家通過本文學習下吧
2017-02-02