files/zh-cn/web/html/element/marquee/index.html


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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209

---
title: <marquee>
slug: Web/HTML/Element/marquee
tags:
  - marquee
translation_of: Web/HTML/Element/marquee
---
<div>{{HTMLRef}}</div>

<div>{{obsolete_header}}</div>

<p>HTML marquee 元素（<code>&lt;marquee&gt;）</code> 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。</p>

<div class="warning">
<p> <code>&lt;marquee&gt;</code> 元素已经 <strong>过时</strong>，请不要再使用。尽管一些浏览器仍然支持它，但它不是必须的。此外，使用这个元素基本上是你可以对你的用户做最糟糕的事情之一，所以请不要这样做。</p>
</div>

<h2 id="属性">属性</h2>

<dl>
 <dt>{{htmlattrdef("behavior")}}</dt>
 <dd>设置文本在 marquee 元素内如何滚动。可选值有 <code>scroll<font face="Open Sans, Arial, sans-serif">，</font></code><code>slide</code> 和 <code>alternate。</code> 如果未指定值，默认值为 <code>scroll。</code></dd>
 <dt>{{htmlattrdef("bgcolor")}}</dt>
 <dd>通过颜色名称或十六进制值设置背景颜色。</dd>
 <dt>{{htmlattrdef("direction")}}</dt>
 <dd>设置 marquee 内文本滚动的方向。可选值有 <code>left</code>, <code>right</code>, <code>up</code> and <code>down。</code>如果未指定值，默认值为 <code>left。</code></dd>
 <dt>{{htmlattrdef("height")}}</dt>
 <dd>以像素或百分比值设置高度。</dd>
 <dt>{{htmlattrdef("hspace")}}</dt>
 <dd>设置水平边距。</dd>
 <dt>{{htmlattrdef("loop")}}</dt>
 <dd>设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动。</dd>
 <dt>{{htmlattrdef("scrollamount")}}</dt>
 <dd>设置每次滚动时移动的长度（以像素为单位）。默认值为 6。</dd>
 <dt>{{htmlattrdef("scrolldelay")}}</dt>
 <dd>设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。请注意， 除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。</dd>
 <dt>{{htmlattrdef("truespeed")}}</dt>
 <dd>默认情况下，会忽略小于 60 的 scrolldelay 值。如果存在 truespeed，那些值不会被忽略。</dd>
 <dt>{{htmlattrdef("vspace")}}</dt>
 <dd>以像素或百分比值设置垂直边距。</dd>
 <dt>{{htmlattrdef("width")}}</dt>
 <dd>以像素或百分比值设置宽度。</dd>
</dl>

<h2 id="Event_handlers" name="Event_handlers">事件回调</h2>

<dl>
 <dt>{{htmlattrdef("onbounce")}}</dt>
 <dd>当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。</dd>
 <dt>{{htmlattrdef("onfinish")}}</dt>
 <dd>当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。</dd>
 <dt>{{htmlattrdef("onstart")}}</dt>
 <dd>当 marquee 开始滚动时触发。</dd>
</dl>

<h2 id="Methods" name="Methods">方法</h2>

<dl>
 <dt>start</dt>
 <dd>开始滚动 marquee。</dd>
 <dt>stop</dt>
 <dd>停止滚动 marquee。</dd>
</dl>

<h2 id="示例">示例</h2>

<pre class="brush: html">&lt;marquee&gt;This text will scroll from right to left&lt;/marquee&gt;

&lt;marquee direction="up"&gt;This text will scroll from bottom to top&lt;/marquee&gt;

&lt;marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"&gt;
  &lt;marquee behavior="alternate"&gt;
    This text will bounce
  &lt;/marquee&gt;
&lt;/marquee&gt;</pre>

<p>{{EmbedLiveSample("Examples", 600, 450)}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '&lt;marquee&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Make it obsolete in favor of CSS but define its expected behavior, for backward compatibility.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '&lt;marquee&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Make it obsolete in favor of CSS but define its expected behavior, for backward compatibility.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>2.0</td>
   <td>7.2</td>
   <td>1.2</td>
  </tr>
  <tr>
   <td><code>truespeed</code> attribute</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9")}}</td>
   <td>4.0</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>hspace/vspace</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>loop</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>truespeed</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>hspace/vspace</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>loop</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>