HTML - <marquee> 标签

HTML <marquee> 标签用于在网页中创建自动滚动或可移动的元素。

如果我们在该标签内放置任何内容，则默认情况下该元素会自行从右向左滑动，但我们可以通过属性更改方向和轴。此标签现在是已弃用的标签，但目前仍受大多数浏览器支持，我们建议您使用 JavaScript 和 CSS 来创建此效果。

语法

<marquee>
  ...
</marquee>

属性

HTML marquee 标签支持 HTML 的全局和事件属性。也接受一些特定的属性，如下所示。

属性	值	描述
width	像素	指定跑马灯的宽度。这可以是 10 或 20% 等值。
height	像素	指定跑马灯的高度。这可以是 10 或 20% 等值。（已弃用）
direction	up down left right	指定跑马灯滚动的方向。（已弃用）
behavior	scroll slide alternate	指定跑马灯的滚动类型。（已弃用）
scrolldelay	值	指定每次跳跃之间的延迟时间。（已弃用）
scrollamount	值	指定跑马灯元素的速度。（已弃用）
loop	数字	指定循环次数。默认值为 INFINITE，表示跑马灯无限循环。（已弃用）
bgcolor	颜色名称或颜色代码	以颜色名称或颜色十六进制值的形式指定背景颜色。（已弃用）
hspace	像素	指定跑马灯周围的水平空间。（已弃用）
vspace	像素	指定跑马灯周围的垂直空间。（已弃用）

方法

方法用于对任何元素执行某些特定任务。以下列出方法可以在 <marquee> 元素上使用。

方法	描述
start()	此方法用于启动 <marquee> 元素的滚动。
stop()	此方法用于停止 <marquee> 元素的滚动。

事件处理程序

事件处理程序用于根据元素的行为触发或激活任务。以下列出事件处理程序可以在 <marquee> 元素上使用。

事件处理程序	描述
onbounce	当滚动到达末尾时将触发，但仅在行为设置为 alternate 时适用。
onfinish	当滚动完成一个循环时将触发，但仅在循环设置为真实数字时适用。
onstart	当滚动开始时将触发。

HTML 跑马灯标签示例

以下示例将说明跑马灯标签的使用方法。何时何地以及如何使用跑马灯标签创建滚动元素。

实现跑马灯元素

<!DOCTYPE html>
<html>
<head>
   <title>HTML marquee Tag</title>
</head>
<body>
   <!-- Marquee Element  Default Scrollong from right to left -->
   <marquee>
       <h2>Tutorialspoint: Simply Easy Learning</h2>
   </marquee>
</body>
</html>

实现水平滚动效果

在此示例中，我们将使用 direction 属性实现水平滚动。我们可以创建从左到右以及从右到左的滚动。

<!DOCTYPE html>
<html>
<head>
   <title>HTML marquee Tag</title>
</head>
<body>
   <h3>From right to left Scrolling</h3>
   <marquee height="100"direction="left">Tutorialpoint</marquee>
   <h3>From left to right Scrolling</h3>
   <marquee height="100"direction="right">Tutorialpoint</marquee>
</body>
</html>

实现垂直滚动效果

在此示例中，我们将使用 direction 属性实现垂直滚动。我们可以创建从下到上以及从上到下的滚动。

<!DOCTYPE html>
<html>
<head>
   <title>HTML marquee Tag</title>
</head>
<body>
   <h3>From down to up Scrolling</h3>
   <marquee height="100"direction="up">Tutorialpoint</marquee>
   <h3>From up to down Scrolling</h3>
   <marquee height="100"direction="down">Tutorialpoint</marquee>
</body>
</html>

在跑马灯标签上使用所有属性

在此示例中，我们将单独在跑马灯元素上使用所有剩余的特定属性，以便您也可以了解它们的使用方法。

<!DOCTYPE html>
<html>
<head>
   <title>HTML marquee Tag</title>
</head>
<body>
   <h2>Default Marquee Element</h2>
   <marquee>
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
   <h2>Setting width, Height and bgcolor on Marquee Element</h2>
   <marquee width="50%" height="25%" bgcolor="lightgray">
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
   <h2>Setting Behaviour Marquee Element</h2>
   <marquee behavior="alternate">
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
   <h2>Setting Speed on Marquee Element</h2>
   <marquee scrollamount="10">
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
   <h2>Setting delay time on Marquee Element</h2>
   <marquee scrolldelay="600">
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
</body>
</html>

支持的浏览器

标签
marquee	是	是	是	是	是

html_deprecated_tags.htm

打印页面