什么是 Marquee?它在 HTML 中是如何应用的?

htmlweb developmentfront end technology更新于 2024/11/15 13:00:17

在 HTML 中，<marquee> 标签用于在网页上插入文本滚动区域。它是一种特殊效果，可用于水平、垂直、上下、弹跳等方式滚动内容。此功能已不再推荐使用。但某些浏览器可能仍然支持它。

语法

以下是 HTML <marquee> 标签的语法 -

<marquee attribute_name = "attribute_value"....more attributes>
   One or more lines or text messages or image
</marquee>

属性

我们可以使用文本的属性来控制文本的滚动效果。以下是可与 <marquee> 标签一起使用的重要属性列表 -

序号	属性和说明
1	width 指定字幕的宽度。可以是 10% 或 20% 等值。
2	height 指定字幕的高度。这可以是 10% 或 20% 等值。
3	direction 这指定了字幕滚动的方向。这可以是向上、向下、向左或向右等值。
4	behavior 这指定了字幕的滚动类型。这可以是滚动、滑动和交替等值。
5	scrolldelay 这指定了每次跳转之间的延迟时间。其值可以是 10 等。
6	scrollamount 这指定了字幕文本的速度。其值可以是 10 等。此属性的默认值为 85。
7	loop 这指定了循环的次数。默认值为 INFINITE，表示字幕无限循环。
8	bgcolor 此项指定背景颜色，可以使用颜色名称或颜色十六进制值。
9	hspace 此项指定字幕周围的水平空间。可以是 10% 或 20% 等值。
10	vspace 此项指定字幕周围的垂直空间。这可以是 10% 或 20% 等值。

以下是一些示例，演示 HTML marquee 标签的用法。

示例

以下是 HTML <marquee> 标签的用法。

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee>Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
</body>
</html>

示例

在下面的例子中，我们使用方向属性来从左和右滚动文本 -

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee direction="left">Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
   <marquee direction="right">Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
</body>
</html>

示例

在这里，我们使用方向属性来上下滚动文本 -

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee direction="up" height="250px">Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
   <marquee direction="down" height="250px">Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
</body>
</html>

示例

在下面的例子中，我们创建一个弹跳滚动效果行为属性。

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee
      direction="up"
      width="200px"
      height="100px"
      behavior="alternate"
      style="border:solid 1px">
      <marquee behavior="alternate">Tutorialspoint</marquee>
   </marquee>
</body>
</html>

示例

在下面的示例中，我们使用 behavior、direction 和 scrollamount 属性来指定滚动时间延迟。

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee behavior="scroll" direction="left" scrollamount="10">Tutorialspoint</marquee>
   <marquee behavior="scroll" direction="left" scrollamount="20">Tutorialspoint</marquee>
   <marquee behavior="scroll" direction="left" scrollamount="30">Tutorialspoint</marquee>
   <marquee behavior="scroll" direction="left" scrollamount="40">Tutorialspoint</marquee>
</body>
</html>