我们在网站升级之前往往需要先在站点做一个滚动的文字提示。 最近公司的一个站点也有这样的需求,而要实现这样的一个功能也不难。只需要了解一些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>
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>
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>