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

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

一、marquee 标签的基本作用

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

网站公告栏；

滚动新闻条；

促销信息展示；

图片轮播滚动；

自定义滚动广告条；

长文本自动滚动展示；

垂直滚动信息面板；

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

滚动日志或监控信息；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<marqueescrollamount="5"direction="left">
<imgsrc="banner1.jpg"/>
<imgsrc="banner2.jpg"/>
</marquee>

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

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

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

<marqueescrollamount="3"direction="left"style="background:#eee;padding:10px;">

<ahref="#">点击了解更多</a>
</marquee>

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

以上就是php小编整理的全部内容，希望对您有所帮助，更多相关资料请查看php教程栏目。