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

1、普通滚动

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

滚动文字

2、向右滚动

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

向右滚动。

3、左右滚动

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

左右滚动

4、向上滚动

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

向上滚动

5、向下滚动

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

向下滚动

6、上下反弹

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

上下反弹

7、抛物线滚动

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

你的文字

8、到处摇摆

<pre class="prettyprint lang-js"><marquee behavior="alternate" direction="up" width="80%"><marquee behavior="alternate" direction="right">你的文字</marquee></marquee>

你的文字

9、波动突出

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

>>你的文字<<

10、波动突出2

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

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

11、加底色跑马灯

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

你的文字

12、加外框跑马灯

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

你的文字

13、外围弹跳

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

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

14、外围弹跳2

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

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

15、滚动加闪动

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

文字输入

16、叠加波动

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

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

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

要跑的文字

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

写法如下：

1<marquee>
2<img decoding="async" height=" 图高 " src=" 图形的http位置 " width=" 图宽 "></img>
3<a href=" 超连结的网址 " rel="noopener" target="_blank"> 要超连结的文字</a>
4</marquee>