标签之美六——滚动字幕的应用

标签之美——滚动字幕的应用

在网页中，我们经常可以看到一些滚动出现的字幕，按钮等内容。滚动字幕的应用会使网页的内容更加生动紧凑。

1、滚动标签

将滚动显示的文字放在这个标签内，就可以实现滚动字幕。这个标签有一个behavior属性，可以设置滚动方式：

scroll：循环滚动，默认的滚动方式

slide：只滚动一次

alternate：左右来回滚动

2、设置字幕背景颜色

1
2
3

<body>
<marquee behavior="alternate" bgcolor="#F4070B">这里是滚动字幕</marquee>
</body>

3、设置字幕滚动方向：direction属性，可以设置的值有：left，right，up，down。分别表示从右向左滚动，从左向右滚动，从下向上滚动，从上向下滚动。

4、设置字幕的滚动速度

通过设置scrollamount属性来更改字幕的滚动速度，数值越大，速度越快。

5、设置字幕滚动时间间隔

scrolldelay可以来设置字幕的停顿时间间隔，单位是毫秒。效果和速度属性相似。

6、设置滚动次数

loop属性可以设置滚动次数，-1则为循环滚动。

7、设置鼠标滑过时停止滚动，移开时继续滚动：

1
2
3

<body>
<marquee direction="down" onMouseOver="this.stop()" onMouseOut="this.start()">这里是滚动字幕</marquee>
</body>

滚动字幕也支持图片的滚动，将文字换位图片即可。

专注技术，热爱生活，交流技术，也做朋友。

——珲少 QQ群：203317592