详解html中的marquee属性

转自: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 >

这是一个完整的例子:

扫描二维码关注公众号,回复: 7265423 查看本文章

代码如下:

?
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 >&nbsp;</ 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 >

猜你喜欢

转载自www.cnblogs.com/sharpest/p/11514787.html
今日推荐