marquee文字信息滚动标签及其替代方案
JyLie 2016-07-29 HTML
已废弃: This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
# marquee使用
- 标签：
文字信息滚动标签。
可以设置滚动方向、速度、时间。滚动方式：来回滚动，重复滚动和非重复滚动。
属性说明:
- direction 表示滚动的方向，值可以是 left，right，up，down，默认为 left
- behavior 表示滚动的方式，值可以是 scroll（连续滚动）slide（滑动一次）alternate（往返滚动）
- loop 表示循环的次数，值是正整数，默认为无限循环
- scrollamount 表示运动速度，值是正整数，默认为 6
- scrolldelay 表示停顿时间，值是正整数，默认为 0，单位似乎是毫秒
- align 表示元素的垂直对齐方式，值可以是 top，middle，bottom，默认为 middle
- bgcolor 表示运动区域的背景色，值是 16 进制的 RGB 颜色，默认为白色
- height、width 表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认 width=100% height 为标签内元素的高度
- hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
- onmouseover=this.stop() onmouseout=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。
🌰 举个栗子：
<marquee>This text will scroll from right to left</marquee>
<marquee direction="up">This text will scroll from bottom to top</marquee>
<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
<marquee behavior="alternate">
This text will bounce
</marquee>
</marquee>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# css 替代方案
使用 css 模拟 marquee 时，需要用到 animation 来模拟滚动动作。当滚动体元素需要用到绝对定位时，其父元素需要需要设置为相对定位且使用伪元素设置 content 为\00a0来占位文档流，来避免子元素绝对定位引起的父元素位置坍塌为空的问题。
🌰 举个栗子：
<div class="marquee-mock">
<div class="scrolling">marquee text</div>
</div>
<style>
.marquee-mock {
overflow: hidden;
position: relative;
}
.marquee-mock::before {
content: '\00a0';
}
.scrolling {
animation: marquee 10s linear infinite;
display: block;
min-width: 100%;
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
}
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32