转自:https://www.jb51.net/web/531309.html
该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果
该标签是个容器标签
语法:
1
|
<
marquee
></
marquee
>
|
以下是一个最简单的例子:
代码如下:
1
|
<
marquee
><
font
size=+3
color
=
red
>Hello, World</
font
></
marquee
>
|
下面这两个事件经常用到:
onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动
onMouseOver="this.stop()":用来设置鼠标移入该区域时停止滚动
代码如下:
1
|
<
marquee
onMouseOut
=
"this.start()"
onMouseOver
=
"this.stop()"
>onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()":用来设置鼠标移入该区域时停止滚动</
marquee
>
|
这是一个完整的例子:
代码如下:
1
2
3
|
<
marquee
id
=
"affiche"
align
=
"left"
behavior
=
"scroll"
bgcolor
=
"#FF0000"
direction
=
"up"
height
=
"300"
width
=
"200"
hspace
=
"50"
vspace
=
"20"
loop
=
"-1"
scrollamount
=
"10"
scrolldelay
=
"100"
onMouseOut
=
"this.start()"
onMouseOver
=
"this.stop()"
>
这是一个完整的例子
</
marquee
>
|
该标签支持的属性多达11个:
align
设定<marquee>标签内容的对齐方式
absbottom:绝对底部对齐(与g、p等字母的最下端对齐)
absmiddle:绝对中央对齐
baseline:底线对齐
bottom:底部对齐(默认)
left:左对齐
middle:中间对齐
right:右对齐
texttop:顶线对齐
top:顶部对齐
代码如下:
1
2
3
4
5
6
7
8
9
|
<
marquee
align
=
"absbottom"
>align="absbottom":绝对底部对齐(与g、p等字母的最下端对齐)。 </
marquee
>
<
marquee
align
=
"absmiddle"
>align="absmiddle": 绝对中央对齐。 </
marquee
>
<
marquee
align
=
"baseline"
>align="baseline": 底线对齐。 </
marquee
>
<
marquee
align
=
"bottom"
>align="bottom": 底部对齐(默认)。 </
marquee
>
<
marquee
align
=
"left"
>align="left": 左对齐。 </
marquee
>
<
marquee
align
=
"middle"
>align="middle": 中间对齐。 </
marquee
>
<
marquee
align
=
"right"
>align="right": 右对齐。 </
marquee
>
<
marquee
align
=
"texttop"
>align="texttop": 顶线对齐。 </
marquee
>
<
marquee
align
=
"top"
>align="top": 顶部对齐。 </
marquee
>
|
behavior
设定滚动的方式:
alternate: 表示在两端之间来回滚动。
scroll: 表示由一端滚动到另一端,会重复。
slide: 表示由一端滚动到另一端,不会重复。
代码如下:
1
2
3
|
<
marquee
behavior
=
"alternate"
>alternate:表示在两端之间来回滚动。 </
marquee
>
<
marquee
behavior
=
"scroll"
>scroll:表示由一端滚动到另一端,会重复。</
marquee
>
<
marquee
behavior
=
"slide"
>slide: 表示由一端滚动到另一端,不会重复。</
marquee
>
|
bgcolor
设定活动字幕的背景颜色,背景颜色可用RGB、16进制值的格式或颜色名称来设定。
代码如下:
1
2
3
|
<
marquee
bgcolor
=
"#006699"
>设定活动字幕的背景颜色 bgcolor="#006699"</
marquee
>
<
marquee
bgcolor
=
"RGB(10%,50%,100%,)"
>设定活动字幕的背景颜色 bgcolor="rgb(10%,50%,100%,)"</
marquee
>
<
marquee
bgcolor
=
"red"
>设定活动字幕的背景颜色 bgcolor="red"</
marquee
>
|
direction
设定活动字幕的滚动方向
代码如下:
1
2
3
4
|
<
marquee
direction
=
"down"
>设定活动字幕的滚动方向direction="down":向下</
marquee
>
<
marquee
direction
=
"left"
>设定活动字幕的滚动方向direction="left":向左</
marquee
>
<
marquee
direction
=
"right"
>设定活动字幕的滚动方向direction="right":向右</
marquee
>
<
marquee
direction
=
"up"
>设定活动字幕的滚动方向direction="up":向上</
marquee
>
|
height
设定活动字幕的高度
代码如下:
1
|
<
marquee
height
=
"500"
direction
=
"down"
bgcolor
=
"#CCCCCC"
>设定活动字幕的高度height="500"</
marquee
>
|
width
设定活动字幕的宽度
代码如下:
1
|
<
marquee
width
=
"500"
bgcolor
=
"#CCCCCC"
>设定活动字幕的宽度width="500"</
marquee
>
|
hspace
设定活动字幕里所在的位置距离父容器水平边框的距离
This controls the horizontal(水平)space around the display box.
代码如下:
1
2
3
4
5
|
<
table
width
=
"500"
border
=
"1"
align
=
"center"
cellpadding
=
"0"
cellspacing
=
"0"
>
<
tr
>
<
td
><
marquee
hspace
=
"100"
bgcolor
=
"#CCCCCC"
>hspace="100"</
marquee
></
td
>
</
tr
>
</
table
>
|
vspace
设定活动字幕里所在的位置距离父容器垂直边框的距离
This controls the vertical(垂直) space around the display box.
代码如下:
1
|
<
marquee
vspace
=
"100"
bgcolor
=
"#CCCCCC"
>hspace="100"</
marquee
>
|
loop
设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1
代码如下:
1
2
3
|
<
marquee
loop
=
"-1"
bgcolor
=
"#CCCCCC"
>我会不停地走。</
marquee
>
<
p
> </
p
>
<
marquee
loop
=
"2"
bgcolor
=
"#CCCCCC"
>我只走两次哦</
marquee
>
|
scrollamount
设定活动字幕的滚动速度,单位pixels
代码如下:
1
2
3
|
<
marquee
scrollamount
=
"10"
>scrollamount="10" </
marquee
>
<
marquee
scrollamount
=
"20"
>scrollamount="20" </
marquee
>
<
marquee
scrollamount
=
"30"
>scrollamount="30" </
marquee
>
|
scrolldelay
设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒)
值大了会有一步一停顿的效果
代码如下:
1
2
3
|
<
marquee
scrolldelay
=
"10"
>scrolldelay="10" </
marquee
>
<
marquee
scrolldelay
=
"100"
> scrolldelay="100"</
marquee
>
<
marquee
scrolldelay
=
"1000"
>scrolldelay="1000" </
marquee
>
|