基于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>
復(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, //卷動速度,數(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>
您可能感興趣的文章:
- jQuery實現(xiàn)適用于移動端的跑馬燈抽獎特效示例
- jQuery+CSS3文字跑馬燈特效的簡單實現(xiàn)
- 基于jquery的文字向上跑動類似跑馬燈的效果
- jquery.rotate.js實現(xiàn)可選抽獎次數(shù)和中獎內(nèi)容的轉(zhuǎn)盤抽獎代碼
- jQuery實現(xiàn)轉(zhuǎn)動隨機數(shù)抽獎效果的方法
- jquery實現(xiàn)九宮格大轉(zhuǎn)盤抽獎
- jquery——九宮格大轉(zhuǎn)盤抽獎實例
- jQuery實現(xiàn)類似老虎機滾動抽獎效果
- 基于jQuery實現(xiàn)的雙11天貓拆紅包抽獎效果
- jquery轉(zhuǎn)盤抽獎功能實現(xiàn)
- jQuery移動端跑馬燈抽獎特效升級版(抽獎概率固定)實現(xiàn)方法
相關(guān)文章
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-03jQuery插入節(jié)點和移動節(jié)點用法示例(insertAfter、insertBefore方法)
這篇文章主要介紹了jQuery插入節(jié)點和移動節(jié)點的方法,結(jié)合實例形式分析了insertAfter和insertBefore方法針對頁面元素節(jié)點操作的使用技巧,需要的朋友可以參考下2016-09-09