前端：弹幕标签用法详细介绍（跑马灯）

弹幕标签

1，注意弹幕标签marquee，现在一些浏览器是不支持的
2，弹幕标签也叫跑马灯

marquee格式及其含有的属性

1.基本格式

如下：

<marquee></marquee>

2.一些属性

1，direction属性：表示的是弹幕行走的方向，如下面实现向左行走

<marqueedirection="left">这波操作6</marquee>

其中direction还可以设置值为up right down，可以自己修改演示。

添加width和height属性可以设置滚动的宽度和高度：如下设置高度为300px

<marqueebehavior="scroll"direction="up"height="300">我改单方向向上循环滚动</marquee>

2，behavior属性：
behavior属性可以取多个值，如：alternate scroll slide 等
若取值为alternate则表示弹幕从屏幕一侧跑到屏幕另外一侧时马上再向相反方向弹回去。
如下：

<marqueebehavior="alternate">我从屏幕一侧跑到另一侧</marquee>

若取值为scroll表示弹幕从一侧跑到另一侧后又重新从一侧跑到另外一侧，如下：

<marqueebehavior="scroll">我单方向循环滚动</marquee>

若取值为slide表示只向单方向行走一次，走到另外一侧时就停下，如下：

<marqueebehavior="slide">我单方向走一次了</marquee>

3，scrollamount属性
表示运动的速度快慢，默认取值为6，设置的越大则跑的越快，如下：

<marqueescrollamount="30">我速度快</marquee>

4，scrolldelay属性
表示停顿的时间，单位为毫秒如下：

<marqueescrolldelay="100"scrollamount="100">速度被抑制了</marquee>

5，bgcolor
表示滚动区域的颜色，如下：

<marqueedirection="left"bgcolor="red">这波操作6</marquee>

运行如图：

6，hspace属性
表示的是走到离边界还有多远的距离就回到开始重新走动。
如下：

<marqueescrollamount="30"hspace="100">离边界还有100px就重新循环</marquee>

其中的值的单位是px，运行后可以发现弹幕走到离左边边界还有一段距离时就重新滚动。
7，onMouseOut="this.start()"属性
表示鼠标放到这里时则弹幕重新从开始地方行走。如下

<marqueeonMouseOut="this.start()">点击这里</marquee>

可以看见，鼠标移动到弹幕位置再拿开时，弹幕重新开始。
8，onMouseOut="this.start()"属性
表示的是鼠标放在弹幕位置并且拿开时，弹幕保持停止状态，不再走。如下：

<marqueeonMouseOut="this.stop()">点击这里</marquee>

运行鼠标放在弹幕处可以看到弹幕不再动。
9，loop属性
loop属性表示的是弹幕循环的次数，默认是无限次。如下：

<marqueeloop="2">循环出现2次</marquee>

运行后可以看到弹幕滚动2次后就再也没有出现了。

综合练习效果：

代码：

<marqueedirection="left"bgcolor="red">这波操作6</marquee><marqueebehavior="alternate">我来回滚动</marquee><marqueebehavior="scroll">我单方向循环滚动</marquee><marqueebehavior="scroll"direction="up"height="300">我改单方向向上循环滚动</marquee><marqueebehavior="slide">我只滚动一次</marquee><marqueebehavior="slide"direction="up">我改向上只滚动一次了</marquee><marqueescrollamount="100">我速度很快.</marquee><marqueescrollamount="30"hspace="100">离边界还有100px就重新循环</marquee><marqueescrollamount="30"vspace="100">离边界还有100px就重新循环</marquee><marqueescrolldelay="30">我小步前进。</marquee><marqueeonMouseOut="this.start()">鼠标移动到这里重新开始弹幕</marquee><marqueeonMouseOut="this.stop()">鼠标移动到这里弹幕停止</marquee><marqueeloop="2"scrollamount="30">循环出现2次</marquee><marqueescrolldelay="100"scrollamount="100">我大步前进。</marquee>

运行效果如下：

喜欢的话点个赞吧，谢谢