多行文字的跑马灯效果 javascript特效-落日故乡

虚位以待

以下代码是多行文字的跑马灯效果，由javascript实现，来自己网络，自己进行了一些小修改，原来是单行的，相信修改也可以让图片有同样的效果。

代码保存为html看效果，按需要修改(marqueeJS.html)


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
.ir{
height:22px;
line-height:22px;
font-size:14px;
}
</style>
</head>

<body>
	<DIV style="OVERFLOW: hidden; LINE-HEIGHT: 22px; HEIGHT: 92px; width:300px; border:solid 1px #f00;">
		<DIV id=marqueebox style="MARGIN-TOP: -22px">
			<DIV class=ir>·<a href="http://www.trustinc.com.cn/ShowArticle.aspx?ArticleId=58&language=en">抢占制高点 创造新优势<br /> 2010-9-25</a><br/></DIV>
			<DIV class=ir>·<a href="http://www.trustinc.com.cn/ShowArticle.aspx?ArticleId=58&language=en">质量有保证 服务最周到<br /> 2010-9-25</a><br/></DIV>
		</DIV>
	</DIV>
<SCRIPT>
function startmarquee(lh,speed,delay) {
var p=false;
var t;
var o=document.getElementById("marqueebox");
o.innerHTML+=o.innerHTML;
o.style.marginTop=0;
o.onmouseover=function(){p=true;}
o.onmouseout=function(){p=false;}

function start(){
t=setInterval(scrolling,speed);
if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
}

function scrolling(){
if(parseInt(o.style.marginTop)%lh!=0)
{
o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
}
else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
startmarquee(44,50,2000);/**行高,滚动速度**/
</SCRIPT>
</body>
</html>

提示：您可以先修改部分代码再运行

导航

2010-10-12 23:12:38

多行文字的跑马灯效果 javascript特效

发布:Calf | 分类:设计点滴 | 评论:0 | 引用:0 | 浏览:

控制面板

内容搜索

常用链接

最新评论及回复

Powered By Z-Blog

Copyright spersky All Rights Reserved.Theme Moonlight,Calf modified.n 浙ICP备16017820号-1

导航

2010-10-12 23:12:38

多行文字的跑马灯效果 javascript特效

发布:Calf | 分类:设计点滴 | 评论:0 | 引用:0 | 浏览: strBatchCount+="spn313=313,"

控制面板

内容搜索

常用链接

最新评论及回复

Powered By Z-Blog

发布:Calf | 分类:设计点滴 | 评论:0 | 引用:0 | 浏览: