Justin's Words

被放弃的 tag Marquee

Posted on | In |

之所以把这个标签写出来是因为看到学校那些网页还到处都在应用，我只能说，学校那些老顽固真是误人子弟。

MDN 已经不推荐使用

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

下面是几个例子，请别再用 <marquee>，用 JavaScript 实现。

Change text between marquee tags

Change text between marquee tags

Change text between marquee tags

Change text between marquee tags

Change text between marquee tags

Change text between marquee tags

Change text between marquee tags

Change text between marquee tags

下面是源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div style="background: #ff5724; margin: 10px 0; width: 100%; height: 30px; line-height: 30px; color: #ffffff">
    <marquee behavior="" direction="">Change text between marquee tags</marquee>
</div>
<div style="background: #ff6738; margin: 10px 0; width: 100%; height: 30px; line-height: 30px; color: #ffffff">
    <marquee behavior="alternate" direction="">Change text between marquee tags</marquee>
</div>
<div style="background: #ff764d; margin: 10px 0; width: 100%; height: 30px; line-height: 30px; color: #ffffff">
    <marquee behavior="" direction="right">Change text between marquee tags</marquee>
</div>
<div style="background: #ff8661; margin: 10px 0; width: 100%; height: 30px; line-height: 30px; color: #ffffff">
    <marquee behavior="slide" direction="">Change text between marquee tags</marquee>
</div>
<div style="background: #ff5724; margin: 10px 0; width: 100%; height: 30px; line-height: 30px; color: #ffffff">
    <marquee behavior="" direction="" scrollamount="10">Change text between marquee tags</marquee>
</div>
<div style="background: #ff5724; margin: 10px 0; width: 100%; height: 30px; line-height: 30px; color: #ffffff">
    <marquee behavior="" direction="" scrollamount="20">Change text between marquee tags</marquee>
</div>
<div style="background: #ff5724; margin: 10px 0; width: 100%; height: 150px; color: #ffffff; text-align: center;">
    <marquee behavior="" direction="up">Change text between marquee tags</marquee>
</div>
<div style="background: #ff5724; margin: 10px 0; width: 100%; height: 150px; color: #ffffff; text-align: center;">
    <marquee behavior="" direction="down">Change text between marquee tags</marquee>
</div>

下面是一个替代 <marquee> 的例子， 其实我是在慕课网学到这个方法，感谢 vivian 老师，Demo 中所有 HTML, CSS 代码归她所有。

See the Pen zxqjJx by Justin Young (@youngdze) on CodePen.