HTML之marquee(文字滚动)详解
原创
HTML之marquee(文字滚动)详解
原创
用户3672714
发布于 2025-09-02 14:55:02
发布于 2025-09-02 14:55:02
1️⃣ <marquee> 标签简介
<marquee>是 HTML 中实现文字或图片滚动效果的标签- 特点：
- 可以让文字或图片水平或垂直滚动
- 仅适用于简单动画
- 注意：该标签 已被 HTML5 弃用，现代网页推荐使用 CSS 动画或 JavaScript 替代
<marquee>这是滚动文字示例</marquee> |
|---|
2️⃣ 基本属性
属性 | 说明 | 示例 |
|---|---|---|
direction | 滚动方向 | left / right / up / down |
behavior | 滚动行为 | scroll（默认） / slide / alternate |
scrollamount | 滚动速度，数值越大越快 | scrollamount="10" |
scrolldelay | 滚动延迟（毫秒） | scrolldelay="50" |
loop | 循环次数 | loop="3"（0 表示无限循环） |
bgcolor | 背景颜色 | bgcolor="#f0f0f0" |
height / width | 高度和宽度 | height="50" / width="300" |
3️⃣ 行为示例
3.1 水平滚动
<marquee direction="left" scrollamount="5"> |
|---|
水平向左滚动文字 |
|---|
</marquee> |
|---|
3.2 垂直滚动
<marquee direction="up" scrollamount="2" height="100"> |
|---|
垂直向上滚动文字 |
|---|
</marquee> |
|---|
3.3 往返滚动
<marquee behavior="alternate" scrollamount="3"> |
|---|
往返滚动文字 |
|---|
</marquee> |
|---|
3.4 控制循环次数
<marquee loop="3"> |
|---|
文字滚动三次 |
|---|
</marquee> |
|---|
4️⃣ 鼠标交互控制
- 暂停滚动：
<marquee onmouseover="this.stop();" onmouseout="this.start();"> |
|---|
鼠标悬停时暂停滚动 |
|---|
</marquee> |
|---|
- 说明：
onmouseover→ 鼠标悬停事件onmouseout→ 鼠标移出事件
5️⃣ 注意事项与替代方案
- HTML5 已弃用：
- 不推荐在现代网页中使用
<marquee>
- 不推荐在现代网页中使用
- 替代方案：
- CSS 动画（
@keyframes+transform） - JavaScript / jQuery 滚动效果
- CSS 动画（
CSS 滚动示例：
<div class="scroll-text">这是CSS滚动文字</div> |
|---|
<style> |
|---|
.scroll-text { |
|---|
display: inline-block; |
|---|
white-space: nowrap; |
|---|
animation: scroll-left 10s linear infinite; |
|---|
} |
|---|
@keyframes scroll-left { |
|---|
0% { transform: translateX(100%); } |
|---|
100% { transform: translateX(-100%); } |
|---|
} |
|---|
</style> |
|---|
✅ 现代网页更安全、灵活、兼容性好。
6️⃣ 总结
<marquee>用于文字或图片滚动，支持 方向、速度、行为、循环 等属性- 已被 HTML5 弃用，不推荐用于生产环境
- 现代替代方案：CSS 动画 + JavaScript，功能更强大
https://www.52runoob.com/archives/6570
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
