首页 > 代码库 > marquee实现跑马灯
marquee实现跑马灯
<!DOCTYPE html>
<html>
<head>
<title>跑马灯大全</title>
</head>
<body>
<marquee onm ouseout="this.start()" onm ouseover="this.stop()" id="aaaa">
<div>
<img src="http://www.mamicode.com/images/haier_logo.png">
<img src="http://www.mamicode.com/images/ts_logo.png">
<img src="http://www.mamicode.com/images/jykj_logo.png">
<img src="http://www.mamicode.com/images/jz_logo.png">
<img src="http://www.mamicode.com/images/klc_logo.png">
<img src="http://www.mamicode.com/images/kp_logo.png">
<img src="http://www.mamicode.com/images/lp_logo.png">
<img src="http://www.mamicode.com/images/smsx_logo.png">
<img src="http://www.mamicode.com/images/lf_logo.png">
<img src="http://www.mamicode.com/images/yd_logo.png">
<img src="http://www.mamicode.com/images/wpt_logo.png">
<img src="http://www.mamicode.com/images/ygr_logo.png">
</div>
</marquee>
<marquee contenteditable="true" >滚动的文字</marquee>
<marquee behavior=alternate>表示双向移动</marquee>
<marquee direction=left>表示运动方向向左</marquee>
<marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>
<marquee scrollamount="30">表示运动方向向左</marquee>
<marquee width=90%>
<a href="http://www.jb51.net" target="_blank">带有超链接的跑马灯!点我试试？</a>
<a href="http://www.baidu.com" target="_blank">还有一条呢!点我试试？</a>
</marquee>
<br /><br />用marquee实现首尾相连循环滚动效果（仅IE7以下）：<br /><br />
<marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="500">
<SPAN unselectable="on">这里是要滚动的内容</SPAN>
</marquee>
<br /><br />用DIV+javascript实现首尾相连循环滚动效果（兼容firefox）：<br /><br />
<div id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;">
<span>这里是要滚动的内容</span>
</div>
<table width="93%" border="1" cellspacing="0" cellpadding="1" align="center" class="p1">
<tr><td width="42%">参数</td><td width="58%">用法介绍</td></tr>
<tr><td width="42%">behavior=scroll, slide, alternate</td><td width="58%">跑马方式：循环绕行，只跑一次就停住，来回往复运动</td></tr>
<tr><td width="42%">direction=left,right,up,down</td><td width="58%">跑马方向：运动方向向左，运动方向向右，运动方向向上，运动方向向下</td></tr>
<tr><td width="42%">loop=100</td><td width="58%">跑马次数：循环100次，如不写默认为一直循环</td></tr>
<tr><td width="42%">width=100%,height=200</td><td width="58%">跑马范围：宽为100%，高为200像素</td></tr>
<tr><td width="42%">scrollamount=20</td><td width="58%">跑马速度：数越大越快</td></tr>
<tr><td width="42%">scrolldelay=500</td><td width="58%">跑马延时：毫秒数，利用它可实现跃进式滚动</td></tr>
<tr><td width="42%">hspace=20，vspace=20</td><td width="58%">跑马区域与其它区域间的空白大小</td></tr>
<tr><td width="42%">bgcolor=#00FFCC</td><td width="58%">跑马区域的背景颜色</td></tr>
</table>
<script type="text/javascript">
function scroll(obj) {
var tmp = (obj.scrollLeft)++;
//当滚动条到达右边顶端时
if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
}
setInterval("scroll(document.getElementById(‘scrollobj‘))",20);
</script>
</body>
</html>