JS跑马灯效果实现(很好用)

原文地址:http://blog.csdn.net/yangsen251024/article/details/8614305

实现跑马灯效果的JS很多,但是很多不好用,下面介绍一个比较好用的。

好用之处在于:

1 支持一个页面多个跑马灯效果
2.支持跑马灯内容的异步加载
关键的实现代码,如果看不懂,可以跑这个列子
<body>
<ul id="RunTopic">
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
<li>文字4</li>
<li>文字5</li>

</ul>
<br>
<input type="button" οnclick="test();" value="test">
<script type="text/javascript">
function test()
{
$("#RunTopic").find("li:first").appendTo($("#RunTopic"));
}
</script>
</body>


另外,也可以使用HTML的marquee 标签,我刚测试而来下,chrome,IE8,火狐都支持!

如:

 <marquee direction="up" scrollamount="1" style="width: 210px;height: 100px" id="">
    <a href="#">纤云弄巧,飞星传恨,银汉迢迢暗度。</a><br />
    <a href="#">金风玉露一相逢,便胜却、人间无数。</a><br />
    <a href="#">柔情似水,佳期如梦。忍顾鹊桥归路!</a><br />
    <a href="#">两情若是久长时,又岂在、朝朝暮暮。</a><br />
    <a href="#">千重劫,百世难,亘古匆匆,弹指间!</a><br />
    <a href="#">不死躯,不灭魂,震古烁今,无人敌!</a><br />
    <a href="#">待到阴阳逆乱时,以我魔血染青天!</a><br />
</marquee>


########################################################################################

JS代码:
(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, //卷动速度,数值越大,速度越慢(毫秒 
_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); 
HTML代码:
line:一次卷动的文本行数 
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> 

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页