HTML <marquee> 标签详解
<marquee> 标签是 HTML 中用来创建文本或图像滚动效果的一个元素。通过该标签，可以实现类似新闻滚动条、横幅广告等效果。虽然 <marquee> 在早期的网页设计中非常常见，但它在 HTML5 中被弃用了，建议使用 CSS 和 JavaScript 来实现类似的效果。
1. 基本语法
<marquee>滚动的文本</marquee>
该标签将使文本或元素水平或垂直滚动。
示例：
<marquee>这是一个水平滚动的文本</marquee>
2. <marquee> 属性
尽管 <marquee> 标签被 HTML5 弃用，但在一些老旧浏览器中仍然可以使用。以下是常见的 <marquee> 属性，它们允许你控制滚动的方向、速度和行为。
常用属性
direction：指定滚动的方向。left：从右到左（默认方向）。right：从左到右。up：从下到上。down：从上到下。
scrollamount：设置滚动的速度，数值越大，滚动越快。scrolldelay：设置滚动之间的时间延迟，单位是毫秒。loop：控制滚动次数。如果设置为infinite，则表示无限滚动。behavior：定义滚动的方式。scroll：滚动（默认）。slide：滑动，直到文本完全显示，然后停止。alternate：从两边来回滚动。
示例：
<marquee direction="right" scrollamount="10" scrolldelay="50" behavior="alternate">
这是一个从左到右的滚动文本，速度较快，并且会来回滚动。
</marquee>
3. 属性详解
direction
direction="left"：默认滚动方向，从右到左。<marquee direction="left">从右到左滚动的文本</marquee>direction="right"：滚动方向从左到右。<marquee direction="right">从左到右滚动的文本</marquee>direction="up"：从下到上滚动。<marquee direction="up">从下到上的滚动文本</marquee>direction="down"：从上到下滚动。<marquee direction="down">从上到下滚动的文本</marquee>
scrollamount
scrollamount定义了滚动的速度，值越大，文本滚动的速度越快。<marquee scrollamount="15">速度较快的滚动文本</marquee>
scrolldelay
scrolldelay控制滚动速度之间的延迟，单位是毫秒。值越大，滚动越慢。<marquee scrolldelay="100">延迟较长的滚动文本</marquee>
behavior
behavior="scroll"（默认）：文本将连续滚动。<marquee behavior="scroll">滚动的文本</marquee>behavior="slide"：文本滑动到结束位置后停住。<marquee behavior="slide">滑动并停住的文本</marquee>behavior="alternate"：文本来回滚动。<marquee behavior="alternate">来回滚动的文本</marquee>
loop
loop="infinite"：设置为无限循环，默认情况下marquee会不断滚动，除非设置了停止条件。<marquee loop="infinite">无限滚动的文本</marquee>
4. 使用 CSS 实现滚动效果
尽管 <marquee> 标签在 HTML5 中已被弃用，但我们可以使用 CSS 来实现类似的滚动效果。下面是使用 CSS 来实现文本滚动的方式。
示例：使用 CSS 实现水平滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.scrolling-text {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
.scrolling-text p {
display: inline-block;
padding-left: 100%;
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<title>CSS Text Scroll</title>
</head>
<body>
<div class="scrolling-text">
<p>This is a CSS-based scrolling text that mimics the behavior of the <marquee> tag.</p>
</div>
</body>
</html>
解释：
- 使用
@keyframes创建一个名为scroll-left的动画，定义文本从右到左滚动。 transform: translateX(-100%)使文本逐渐向左移动，直到完全不可见。
5. 使用 JavaScript 动态控制滚动
通过 JavaScript，我们也可以动态控制文本的滚动效果。例如，改变速度或方向等。
示例：使用 JavaScript 控制滚动速度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.scrolling-text {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
.scrolling-text p {
display: inline-block;
padding-left: 100%;
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<title>JavaScript Text Scroll</title>
</head>
<body>
<div class="scrolling-text">
<p>This is a scrollable text controlled by JavaScript!</p>
</div>
<script>
const scrollingText = document.querySelector('.scrolling-text p');
// Change the scroll speed by modifying the animation duration
function changeSpeed(speed) {
scrollingText.style.animationDuration = `${speed}s`;
}
// Example: Changing scroll speed after 5 seconds
setTimeout(() => changeSpeed(20), 5000);
</script>
</body>
</html>
6. 总结
<marquee>标签在 HTML5 中已弃用，虽然它仍然可以在旧浏览器中使用，但推荐使用现代的 CSS 和 JavaScript 方法来实现滚动效果。- 通过 CSS 动画和
@keyframes，可以灵活地实现文本或元素的滚动效果，支持更多的自定义，如速度、方向等。 - JavaScript 也能动态地控制滚动效果，实现更高级的交互。
发表回复