HTML中marquee标签的属性参数和用法详解

在网页开发中，<marquee> 是一个非标准但广泛支持的 HTML 标签，它允许开发者创建滚动文字、图片或内容的视觉效果。尽管 marquee 并不属于 HTML5 标准的一部分，但由于其简单易用，仍然在许多网页中被使用，尤其是在滚动公告、跑马灯新闻、广告展示等场景中。本文将详细介绍 marquee 标签的常用属性、使用方式及其典型应用，帮助开发者理解如何在网页中实现滚动动画效果，并提供多个代码示例供参考。

一、marquee 标签的基本作用

<marquee> 标签用于创建水平或垂直滚动的内容，它可以包裹文本、图片、链接、表格等 HTML 元素，并支持多种滚动控制参数。其核心作用是实现内容的自动滚动，常用于：

网站公告栏；

滚动新闻条；

促销信息展示；

图片轮播滚动；

自定义滚动广告条；

长文本自动滚动展示；

垂直滚动信息面板；

多方向滚动的交互式内容；

滚动日志或监控信息；

跨浏览器兼容的简单动画展示。

虽然 marquee 不属于 HTML5 标准，但在大多数现代浏览器中仍可运行，适合快速实现滚动效果。

二、marquee 标签的常用属性参数

<marquee> 支持丰富的属性参数，用于控制滚动方向、速度、行为等。以下是常见的属性及其作用：

behavior：定义滚动行为，支持 scroll（滚动）、slide（滑动后停止）、alternate（来回滚动）；

<marquee behavior="scroll">滚动行为</marquee>
<marquee behavior="slide">滑动行为</marquee>
<marquee behavior="alternate">来回滚动</marquee>

direction：定义滚动方向，支持 left、right、up、down；

<marquee direction="left">向左滚动</marquee>
<marquee direction="up">向上滚动</marquee>

loop：定义滚动的次数，infinite 表示无限滚动；

<marquee loop="3">滚动三次</marquee>
<marquee loop="infinite">无限滚动</marquee>

scrollamount：控制滚动速度，数值越大滚动越快；

<marquee scrollamount="5">速度较慢</marquee>
<marquee scrollamount="20">速度较快</marquee>

scrolldelay：定义每次滚动之间的延迟时间，单位为毫秒；

<marquee scrolldelay="100">滚动延迟</marquee>

truespeed：定义 scrollamount 是否为像素/毫秒，若设置为 true，滚动更精确；

<marquee scrollamount="10" truespeed="true">精确滚动</marquee>

width 和 height：定义滚动区域的宽高，可以是像素或百分比；

<marquee width="100%" height="50px">全宽滚动条</marquee>

bgcolor：设置滚动区域的背景颜色；

<marquee bgcolor="#f0f0f0">带背景色滚动</marquee>

onmouseover 和 onmouseout：自定义滚动行为，如鼠标悬停暂停；

<marquee onmouseover="this.stop()" onmouseout="this.start()">悬停暂停</marquee>

style 和 CSS 控制：通过 CSS 控制样式，如字体、颜色、边框、过渡效果等；

<marquee style="font-size: 16px; color: #ff0000;">带样式的滚动文字</marquee>

结合 JavaScript 控制滚动行为：可使用 stop() 和 start() 方法控制滚动；

<marquee id="newsMarquee">滚动新闻</marquee>
<button onclick="document.getElementById('newsMarquee').stop()">暂停</button>
<button onclick="document.getElementById('newsMarquee').start()">继续</button>

滚动内容嵌套：支持嵌套 HTML 元素，如 <img>、<a>、<p>、<ul> 等；

<marquee>
  <img src="image1.jpg" alt="滚动图片">
  <img src="image2.jpg" alt="滚动图片">
</marquee>

垂直滚动设置：通过 direction="up" 或 direction="down" 实现垂直滚动；

<marquee direction="up" height="100px" scrollamount="2">
  <p>第一条新闻</p>
  <p>第二条新闻</p>
</marquee>

水平滚动设置：默认为水平滚动，适用于文字、图片等；

<marquee>这是默认向左滚动的文本</marquee>

结合 JavaScript 实现动态内容更新：可用于实时滚动更新内容；

<marquee id="dynamicMarquee">初始文本</marquee>
<script>
  const marquee = document.getElementById("dynamicMarquee");
  marquee.innerHTML = "新内容加载中...";
</script>

三、marquee 标签的典型应用方式

1. 基本滚动新闻栏

<marquee>欢迎访问本站 - 最新公告：本周促销活动已开始</marquee>

1. 多方向滚动（左右切换）

<marquee direction="left">向左滚动</marquee>
<marquee direction="right">向右滚动</marquee>

1. 上下滚动公告栏

<marquee direction="up" height="100" scrollamount="2">
  <p>系统将在今晚进行维护</p>
  <p>请提前保存您的数据</p>
</marquee>

1. 带有样式的滚动条

<marquee style="border: 1px solid #333; padding: 10px; background: #f9f9f9;">
  滚动内容带样式
</marquee>

1. 结合鼠标事件实现交互

<marquee onmouseover="this.stop()" onmouseout="this.start()">
  悬停时停止滚动
</marquee>

1. 滚动图片轮播

<marquee scrollamount="5" direction="left">
  <img src="banner1.jpg" />
  <img src="banner2.jpg" />
</marquee>

1. 动态加载内容并滚动

<marquee id="newsTicker">初始内容</marquee>
<script>
  document.getElementById("newsTicker").innerHTML = "新内容已加载";
</script>

1. 滚动列表内容

<marquee behavior="scroll" direction="up" height="150">
  <ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
  </ul>
</marquee>

1. 兼容旧版浏览器的滚动条

<marquee>本滚动条兼容 IE、Chrome、Firefox 等主流浏览器</marquee>

1. 实现滚动广告条

<marquee scrollamount="3" direction="left" style="background: #eee; padding: 10px;">
  
    <a href="#">点击了解更多</a>
</marquee>

尽管 <marquee> 标签不是 HTML5 的标准标签，但由于其实现简单、兼容性较好，仍然被广泛用于各种网页项目中，尤其在滚动公告、新闻展示、广告条等场景中表现良好。通过合理设置 behavior、direction、scrollamount、loop 等属性，开发者可以灵活控制滚动方式，提升页面的视觉表现和用户交互体验。

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com