marquee属性详解

首先让我们认识这个<marquee>标签，它是成对出现的标签，首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它们都是可选的。

<marquee
aligh=left|center|right|top|bottom
bgcolor=#n  
direction=left|right|up|down  
behavior=alternate|scroll|slide  
height＝n  
hspace＝n  
scrollamount=n  
Scrolldelay=n  
width=n  
VSpace=n  
loop＝n>

滚动内容滚动内容滚动内容滚动内容滚动内容
</marquee>

align属性

align是设定活动字幕的位置，不过除了居左、居中、居右三种位置外，又增加靠上（align=top）和靠下（align=bottom）两种位置。  

bgcolor属性

Bgcolor：用于设定活动字幕的背景颜色，参数值是16进制（形式：#AABBCC或#AA5566等）或预定义的颜色名字（如red、yellow、blue等）。

如下所示：

<marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是红色的</marquee>

direction属性

用于设定活动字幕的滚动方向，属性的参数值有down、left、right、up共四个单一可选值，分别代表滚动方向向下、向左、向右、向上。如下所示：

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

<marquee direction="right">我向下滚动</marquee>

behavior属性

behavior属性用于设定滚动的方式，主要由三种方式：

1.  behavior="scroll"--表示由一端滚动到另一端；
2.  behavior="slide":--表示由一端快速滑动到另一端，且不再重复；
3.  behavior="alternate" 默认值 --表示在两端之间来回滚动。

<marquee behavior="alternate">我来回滚动</marquee>
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee>
<marquee behavior="slide">我只滚动一次</marquee>
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>

需要注意的是：如果在<marquee>标签中同时出现了direction和behavior属性，那么scroll和slide的滚动方向将依照direction属性中参数的设置。

width和height属性

width和height属性的作用决定滚动文字在页面中的矩形范围大小。

width属性用以规定矩形的宽度，height属性规定矩形的高度。

这两个属性的参数值可以是数字或者百分数，数字表示矩形所占的（宽或高）像素点数，百分数表示矩形所占浏览器窗口的（宽或高）百分比。

如下所示：

  <marquee width="300" height="30" bgcolor="red">我宽300像素，高30像素。</marquee>

hspace和vspace属性

Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。  

<marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形边缘水平和垂直距周围各10像素。</marquee>
<marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形边缘水平和垂直距周围各50像素。</marquee>

Scrollamount和scrolldelay属性

这两个属性决定文字滚动的速度（scrollamount）和延时（scrolldelay），参数值都是正整数。

如下所示：  

<marquee scrollamount="100">我速度很快.</marquee>
<marquee scrollamount="50">我慢了些。</marquee>
<marquee scrolldelay="30">我小步前进。</marquee>
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

注：scrollAmount--设置或获取介于每个字幕绘制序列之间的文本滚动像素数

Loop属性

loop属性决定滚动文字的滚动次数，缺省是无限循环。参数值可以是任意的正整数，如果设置参数值为-1或infinite时将无限循环。  

marquee标记的默认情况是向左滚动无限次，字幕高度是文本高度，滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。
如下所示：

<marquee loop="2">我滚动2次。</marquee>
<marquee loop="infinite">我无限循环滚动。</marquee>
<marquee loop="-1">我无限循环滚动。</marquee>

 

　　marquee标记的参数较多，在应用中要把握一个原则，能用默认值就不要再设置参数值，用什么参数就设置该参数的值，其它参数就不要再设置，以把代码控制在最少的范围内

---

补充记录

innercode--设置或获取位于对象起始和结束标签内的 code
innerText--设置或获取位于对象起始和结束标签内的文本
scrollLeft-- 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop --设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
PS:没有scrollRight和scrollDown
要创建垂直滚动的字幕，请将其 scrollLeft 属性设定为 0。
要创建水平滚动的字幕，请将其 scrollTop 属性设定为 0，这将覆盖任何脚本设置
scrollHeight-- 获取对象的滚动高度 
offsetTop--获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetLeft--获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetHeight--获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式
clearInterval 使用 setInterval 方法取消先前开始的间隔事件。

代码:

<marquee direction="up" onmouseover="this.stop();" onmouseout="this.start();">
阿米的眼泪<br>
眼泪的阿米<br>
amily<br>
</marquee>