HTML - marquee 标签_HTML 菜鸟教程

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

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

语法


<marquee> ... </marquee>

属性

HTML<marquee> 标签支持 HTML 的全局属性和事件属性。也接受下面列出的一些特定属性。

属性	值	描述
width	pixels	指定选取框的宽度。这可以是 10% 或 20% 等值。
height	pixels	指定选取框的高度。这可以是 10% 或 20% 等值（已弃用）
direction	up down left right	指定选取框应滚动的方向。（已弃用）
behavior	scroll slide alternate	指定选取框的滚动类型。（已弃用）
scrolldelay	value	指定每次跳转之间的延迟时间。（已弃用）
scrollamount	value	指定选取框元素的速度。（已弃用）
loop	number	指定要循环的次数。默认值为 INFINITE，这意味着选取框会无休止地循环。（已弃用）
bgcolor	color_name or color_code	根据颜色名称或颜色十六进制值指定背景颜色。（已弃用）
hspace	pixels	指定选取框周围的水平空间。（已弃用）
vspace	pixels	指定选取框周围的垂直空间。（已弃用）

方法

方法用于在任何元素上执行某些特定任务。下面列出的方法可用于 <marquee> 标签。

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

事件处理程序

事件处理程序用于根据元素的行为触发或激活 taske。下面列出的事件处理程序可用于 <marquee> 元素。

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

HTML<marquee> 标签示例

下面的示例将说明<marquee> 标签的用法。在哪里、何时以及如何使用<marquee> 标签来创建滚动元素。

实现选取框元素


<!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>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - frame 标签 HTML - Web SQL 数据库 >>