基于Jquery的文字滾動(dòng)跑馬燈插件(一個(gè)頁(yè)面多個(gè)滾動(dòng)區(qū))
更新時(shí)間：2010年07月26日 14:00:55 作者：
文字逐行或多行滾動(dòng)跑馬燈插件，基于Jquery。命名為Jquery.RollTitle。支持在一個(gè)頁(yè)面聲明多個(gè)滾動(dòng)區(qū) (就為了要這點(diǎn)才寫(xiě)了這個(gè))
兼容各瀏覽器的文本行高
(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í)間
<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>
復(fù)制代碼 代碼如下:
(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>
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)適用于移動(dòng)端的跑馬燈抽獎(jiǎng)特效示例
- jQuery+CSS3文字跑馬燈特效的簡(jiǎn)單實(shí)現(xiàn)
- 基于jquery的文字向上跑動(dòng)類(lèi)似跑馬燈的效果
- jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤(pán)抽獎(jiǎng)代碼
- jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法
- jquery實(shí)現(xiàn)九宮格大轉(zhuǎn)盤(pán)抽獎(jiǎng)
- jquery——九宮格大轉(zhuǎn)盤(pán)抽獎(jiǎng)實(shí)例
- jQuery實(shí)現(xiàn)類(lèi)似老虎機(jī)滾動(dòng)抽獎(jiǎng)效果
- 基于jQuery實(shí)現(xiàn)的雙11天貓拆紅包抽獎(jiǎng)效果
- jquery轉(zhuǎn)盤(pán)抽獎(jiǎng)功能實(shí)現(xiàn)
- jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效升級(jí)版(抽獎(jiǎng)概率固定)實(shí)現(xiàn)方法
相關(guān)文章
jQuery關(guān)于導(dǎo)航條背景切換效果實(shí)現(xiàn)示例
導(dǎo)航條背景切換的效果，想必大家在瀏覽網(wǎng)頁(yè)時(shí)可能會(huì)碰到過(guò)，下面為大家介紹下使用jquery如何實(shí)現(xiàn)，具體思路及代碼如下，感興趣的朋友可以參考下2013-09-09
簽到功能現(xiàn)在算是社交化網(wǎng)站增加網(wǎng)站粘合度的一個(gè)普遍做法了，于是也想在自己的項(xiàng)目中添加一個(gè)，經(jīng)過(guò)一番度娘，終于完成，這里分享給大家，有需要的小伙伴可以參考下。2015-04-04
jQuery實(shí)現(xiàn)表格展開(kāi)與折疊的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格展開(kāi)與折疊的方法,涉及jQuery中toggleClass方法與鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
下面小編就為大家?guī)?lái)一篇Jq通過(guò)td獲取同行其它列td的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
最近在做項(xiàng)目的時(shí)候使用了Jquery~新手學(xué)習(xí)jquery.~遇到了一些"奇怪"的問(wèn)題(各位大神別拍磚).感謝ClassYuan老大的支持2010-08-08
Android中的資源是指非代碼部分，指外部文件，本文詳細(xì)介紹資源使用概覽，需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了JQuery控制圖片由中心點(diǎn)逐漸放大效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
純JAVASCRIPT圖表動(dòng)畫(huà)插件Highcharts Examples
官方提供免費(fèi)的下載包以及詳細(xì)的文檔說(shuō)明，非常的值得收藏。2011-04-04
jQuery實(shí)現(xiàn)input輸入框獲取焦點(diǎn)與失去焦點(diǎn)時(shí)提示的消失與顯示功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)input輸入框獲取焦點(diǎn)與失去焦點(diǎn)時(shí)提示的消失與顯示功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了jQuery.Form上傳文件操作,首先需要我們先建立test文件夾，具體代碼內(nèi)容大家通過(guò)本文學(xué)習(xí)下吧2017-02-02