滚动文字——跑马灯特效

      我们在网站升级之前往往需要先在站点做一个滚动的文字提示。 最近公司的一个站点也有这样的需求，而要实现这样的一个功能也不难。只需要了解一些html知识我们就可以办到。现我们将常见的文字跑马灯效果总结如下。

1、普通滚动

<marquee>滚动文字</marquee>普通滚动

普通滚动
2、向右滚动

<marquee direction="right">向右滚动</marquee>

向右滚动。

3、左右滚动

<marquee behavior="alternate">左右滚动</marquee>

左右滚动
4、向上滚动

<marquee direction="up">向上滚动</marquee>

向上滚动
5、向下滚动

<marquee direction="down">向下滚动</marquee>

向下滚动

6、上下反弹

<marquee direction="up" behavior="alternate">上下反弹</marquee>

上下反弹

7、抛物线滚动

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">你的文字</marquee></marquee>

你的文字

8、到处摇摆

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">你的文字</marquee></marquee>

你的文字

9、波动突出

<marquee behavior="alternate" width="10%">>></marquee>你的文字<marquee behavior="alternate" width="10%"><<</marquee>

>>你的文字<<

10、波动突出2

<marquee direction="left" width="10%"><<<<<</marquee>测试<marquee direction="right" width="10%">>>>>></marquee>

<<<<<测试>>>>>

11、加底色跑马灯

<font color="#0000FF"><marquee direction="left" style="background: #FFCC00">你的文字</marquee></font>

你的文字

12、加外框跑马灯

<marquee style="border:1px dotted #CC0066 ">你的文字</marquee>

你的文字

13、外围弹跳

<MARQUEE behavior=alternate direction=left scrollAmount=3 width="4%"><font face=Webdings>3</font></MARQUEE><MARQUEE scrollAmount=1 direction=left width="2%">| | |</MARQUEE>你的文字<MARQUEE scrollAmount=1 direction=right width="2%">| | |</MARQUEE><MARQUEE behavior=alternate direction=right scrollAmount=3 width="4%"><font face=Webdings>4</font></MARQUEE>

3| | |你的文字| | |4

14、外围弹跳2

<MARQUEE behavior=alternate direction=left scrollAmount=3 width="4%"><font face=Webdings>4</font></MARQUEE><MARQUEE scrollAmount=1 direction=left width="2%">| | |</MARQUEE>文字输这<MARQUEE scrollAmount=1 direction=right width="2%">| | |</MARQUEE><MARQUEE behavior=alternate
direction=right scrollAmount=3 width="4%"><font face=Webdings>3</font></MARQUEE>

4| | |文字输这| | |3

15、滚动加闪动

<marquee behavior="alternate"><marquee width="150">文字输入</marquee></marquee>

文字输入

16、叠加波动

<marquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height=80 style="Text-align;filter:wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"><center>文字一<BR />文字二</center></marquee>

文字一
文字二

17、鼠标放上停止，移走运动

<marquee onMouseOver="this.stop()" onMouseOut="this.start()" style="background: #9966CC" height="50" direction="up" scrolldelay="4" scrollamount="1">要跑的文字</marquee>

要跑的文字

注：在跑马灯<marquee>标签开始至</marquee>结尾，中间所包含的物件都会跟着跑，包含文字、图形、超连结…

写法如下：

<marquee>
<img src=" 图形的http位置 " width=" 图宽 " height=" 图高 ">
<a href=" 超连结的网址 " target="_blank" > 要超连结的文字</a >
</marquee>