html跑马灯/走马灯效果

本文转载自：http://blog.sina.com.cn/s/blog_71d931b00100o0wn.html

实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句，它的效果如下所示：

<marquee> 滚动的文字</marquee>

　　适当的运用<marquee>标签的参数，可以表现出不同的效果，请看下面的几个例子：

　　1、左右弹来弹去的跑马灯

<marquee width="400" style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(248,248,248)"><span style="color:#000000; word-wrap:normal; word-break:normal">弹来弹去跑马灯!</span></marquee>

　　实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动，direction= left表示运动方向向左。marquee的宽度可以使用绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在 Netscape下是看不到的。

　　源码粘贴框：

<marquee width=400 behavior=alternate direction=left align=middle>弹来弹去跑马灯!</marquee>

　　２、跑的很快的跑马灯

<marquee style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(248,248,248)"><span style="color:#000000; word-wrap:normal; word-break:normal">跑的很快跑马灯!</span></marquee> 　

　　只要在<marquee>标签后面加上“scrollamount=15”即可,修改=后边的数字参数即可限制文字移动的速度。

　　３、带有超级链接的跑马灯

<marquee width="90%" style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(248,248,248)"><span style="color:#000000; word-wrap:normal; word-break:normal"><a href="http://www.taobaojp5.tk/" target="_blank" style="text-decoration:none; color:rgb(106,63,48)"></a><a href="http://www.taobaojp5.tk/" style="text-decoration:none; color:rgb(106,63,48)">带超级链接的跑马灯!点我试试？</a><a href="http://www.taobaojp5.tk/" style="text-decoration:none; color:rgb(106,63,48)"></a>　　　　　　　　　　<a href="http://www.taobaojp5.tk/" target="_blank" style="text-decoration:none; color:rgb(106,63,48)"></a><a href="http://www.taobaojp5.tk/" style="text-decoration:none; color:rgb(106,63,48)">还有一条呢!点我试试？</a></span> </marquee> 　

　　实现的方法很简单，把整个<marquee></marquee>语句包含在超链接中就行，你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接，这样的跑马灯就可用来发布滚动新闻或是做站点导航了。

　　如果你想给跑马灯的文字加上颜色，换用不同的字体（默认是宋体，换体就要加代码），只要在文字前加上<FONT face=楷体_GB2312 color=#ff0000 size=3>就行了，你可在“face=”后边换上你喜欢的字体，在“color=”后边换上你喜欢的字颜色，在“size=”后边换上适合的字号，如果想让字体加粗，就再加上<STRONG>。

<wbr style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(248,248,248)"><span style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(248,248,248)"></span><wbr style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(248,248,248)"><span style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(248,248,248)"></span><wbr style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(248,248,248)"><span style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(248,248,248)">请看一下效果：</span><marquee width="400" style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(248,248,248)"><span style="font-family:楷体_GB2312; font-size:14px; color:#FF0000; word-wrap:normal; word-break:normal; line-height:24px"><strong><a href="http://www.taobaojp5.tk/" target="_blank" style="text-decoration:none; color:rgb(106,63,48)"></a><a href="http://www.taobaojp5.tk/" style="text-decoration:none; color:rgb(106,63,48)"><span style="font-family:楷体_GB2312; font-size:14px; color:#FF0000; word-wrap:normal; word-break:normal"><strong>带超级链接的跑马灯!点我试试？</strong></span></a><a href="http://www.taobaojp5.tk/" style="text-decoration:none; color:rgb(106,63,48)"></a></strong></span>　　　　　　<a href="http://www.taobaojp5.tk/" target="_blank" style="text-decoration:none; color:rgb(106,63,48)"></a><a href="http://www.taobaojp5.tk/" style="text-decoration:none; color:rgb(106,63,48)">还有一条呢!点我试试</a><a href="http://www.taobaojp5.tk/" style="text-decoration:none; color:rgb(106,63,48)">？</a> </marquee><span style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(248,248,248)"></span> <p align="left" style="margin-top:0px; margin-bottom:5px; padding-top:0px; padding-bottom:0px; border:0px; list-style:none; word-wrap:normal; word-break:normal; line-height:21px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(248,248,248)"> <span style="color:#000000; word-wrap:normal; word-break:normal"><span style="word-wrap:normal; word-break:normal; line-height:17pt"><span style="font-size:14px; word-wrap:normal; word-break:normal; line-height:24px">　　上面效果的代码码如下：</span></span></span></p> <p align="center" style="margin-top:0px; margin-bottom:5px; padding-top:0px; padding-bottom:0px; border:0px; list-style:none; word-wrap:normal; word-break:normal; line-height:21px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(248,248,248)"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">&lt;marquee width=400 scrollamount=2&gt; &lt;a href=<a href="http://www.taobaojp5.tk/" target="_blank" style="text-decoration:none; color:rgb(106,63,48)">http://www.taobaojp5.tk</a>&gt;&lt;FONT face=楷体_GB2312 color=#ff0000 size=3&gt;&lt;STRONG&gt;带有超链接的跑马灯!点我试试？&lt;/a&gt;　　　　　　&lt;a href=http://954872988.qzone.qq.com/;还有一条呢!点我试试？&lt;/FONT&gt;&lt;/STRONG&gt;&lt;/a&gt; &lt;/marquee&gt;</span></p> <p align="left" style="margin-top:0px; margin-bottom:5px; padding-top:0px; padding-bottom:0px; border:0px; list-style:none; word-wrap:normal; word-break:normal; line-height:21px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(248,248,248)"> <span style="color:#000000; word-wrap:normal; word-break:normal"><span style="word-wrap:normal; word-break:normal; line-height:17pt"><span style="font-size:14px; word-wrap:normal; word-break:normal; line-height:24px">　　以上几个例子都是&lt;marquee&gt;标签参数的应用，下面把所有可以利用的参数列在表中供你参考，不过还是要提醒你，&lt;marquee&gt;标签只被IE所支持，使用Netscape浏览器是看不到的噢。</span></span></span></p> <table cellspacing="0" cellpadding="1" width="93%" align="center" border="1" style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; text-align:left; background-color:rgb(248,248,248)"><tbody> <tr> <td width="42%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">参数</span> </td> <td width="58%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">用法介绍</span> </td> </tr> <tr> <td width="42%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">behavior=scroll, slide, alternate</span> </td> <td width="58%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">跑马方式：循环绕行，只跑一次就停住，来回往复运动</span> </td> </tr> <tr> <td width="42%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">direction=left,right</span> </td> <td width="58%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">跑马方向：从左向右，从右向左</span> </td> </tr> <tr> <td width="42%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">loop=100</span> </td> <td width="58%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">跑马次数：循环100次，如不写默认为一直循环</span> </td> </tr> <tr> <td width="42%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">width=100%,height=200</span> </td> <td width="58%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">跑马范围：宽为100%，高为200像素</span> </td> </tr> <tr> <td width="42%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">scrollamount=20</span> </td> <td width="58%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">跑马速度：数越大越快</span> </td> </tr> <tr> <td width="42%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">scrolldelay=500</span> </td> <td width="58%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">跑马延时：毫秒数，利用它可实现跃进式滚动</span> </td> </tr> <tr> <td width="42%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">hspace=20，vspace=20</span> </td> <td width="58%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">跑马区域与其它区域间的空白大小</span> </td> </tr> <tr> <td width="42%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">bgcolor=#00FFCC</span> </td> <td width="58%" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="font-size:14px; color:#000000; word-wrap:normal; word-break:normal; line-height:24px">跑马区域的背景颜色</span> </td> </tr> <tr> <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> face=楷体_GB2312</td> <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 跑马灯文字字体</td> </tr> <tr> <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> color=#ff0000</td> <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 跑马灯文字颜色</td> </tr> <tr> <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> size=3</td> <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 跑马灯文字字号</td> </tr> <tr> <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> STRONG</td> <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 跑马灯文字加粗</td> </tr> </tbody></table> <p align="left" style="margin-top:0px; margin-bottom:5px; padding-top:0px; padding-bottom:0px; border:0px; list-style:none; word-wrap:normal; word-break:normal; line-height:21px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(248,248,248)"> <span style="color:#000000; word-wrap:normal; word-break:normal"><span style="word-wrap:normal; word-break:normal; line-height:17pt"><span style="font-size:14px; word-wrap:normal; word-break:normal; line-height:24px">　　你已经看到，尽管&lt;marquee&gt;参数不少，但毕竟不能实现复杂的和自定义的特殊跑马灯效果，而且还有浏览器限制，所以我们更多情况下会采用JavaScript来实现跑马灯。</span></span></span></p> <p align="left" style="margin-top:0px; margin-bottom:5px; padding-top:0px; padding-bottom:0px; border:0px; list-style:none; word-wrap:normal; word-break:normal; line-height:21px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(248,248,248)"> <wbr></wbr></p> <p align="left" style="margin-top:0px; margin-bottom:5px; padding-top:0px; padding-bottom:0px; border:0px; list-style:none; word-wrap:normal; word-break:normal; line-height:21px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(248,248,248)"> <wbr></wbr></p> <p align="left" style="margin-top:0px; margin-bottom:5px; padding-top:0px; padding-bottom:0px; border:0px; list-style:none; word-wrap:normal; word-break:normal; line-height:21px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(248,248,248)"> <span style="word-wrap:normal; word-break:normal; line-height:17pt"><strong><span style="color:#F81004; word-wrap:normal; word-break:normal; line-height:21px">以上个人总结，可以将此特效用到淘宝公告上去，显的专业也比较好看，尤其是拓展版用这个代码我觉得还是比较炫的，放在头部，或者宝贝描述里面都非常恰当，其余靠自己想象了，万事要靠自己哦~</span></strong></span></p> <br><br></wbr></wbr></wbr>