<!DOCTYPE html>
<html> <head><title>跑马灯大全</title> </head> <body> <marquee οnmοuseοut="this.start()" οnmοuseοver="this.stop()" id="aaaa"> <div> <img src="images/haier_logo.png"> <img src="images/ts_logo.png"> <img src="images/jykj_logo.png"> <img src="images/jz_logo.png"> <img src="images/klc_logo.png"> <img src="images/kp_logo.png"> <img src="images/lp_logo.png"> <img src="images/smsx_logo.png"> <img src="images/lf_logo.png"> <img src="images/yd_logo.png"> <img src="images/wpt_logo.png"> <img src="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>