【HTML】HTML marquee 滚动标签：从基础属性到交互实战

HTML marquee 滚动标签：从基础属性到交互实战

在网页开发中，滚动文字、公告通知是极为常见的需求，而 HTML 自带的<marquee>标签，正是实现滚动效果最快捷、最简单的方式之一。尽管在最新的 HTML 规范中，该标签已被标记为非标准标签、不推荐正式规范使用，但得益于其极简的用法、全浏览器兼容的特性，至今仍被广泛用于快速开发场景、后台系统、简易公告栏等需求中。

本文将系统梳理<marquee>标签的所有核心用法，从基础滚动、方向控制，到速度调节、鼠标交互，帮你一篇掌握这个标签的全部实用技巧。

一、基础用法：默认滚动效果

最基础的<marquee>标签无需任何额外属性，只需包裹需要滚动的内容，即可实现默认的横向滚动效果，也是我们最常用的入门写法。

<marquee>这是最基础的默认滚动文字效果</marquee>

效果说明：默认情况下，内容会从右向左无限循环滚动，也就是我们常说的“跑马灯”效果。

二、核心行为控制：behavior 属性

behavior属性用于定义滚动的核心行为模式，是决定滚动动画类型的关键属性，共有 4 个核心可选值，对应不同的滚动效果。

1. 预设循环滚动（scroll，默认值）

scroll是<marquee>标签的默认行为，即使不写该属性，也会默认启用。内容会从容器一端滚动到另一端，循环往复，无间断重复。

<marqueebehavior="scroll">这是预设的循环滚动效果（标签默认行为）</marquee>

2. 单次滑动效果（slide）

slide滑动模式下，内容会从起始端滑动到容器的另一端，到达边界后立即停止滚动，不会循环播放。

<marqueebehavior="slide">这是单次滑动效果，到达边界后自动停止</marquee>

3. 来回往返滚动（alternate）

alternate是反弹往返效果，内容滚动到容器边界后，会自动反向弹回，实现来回往复的滚动，类似“撞墙反弹”的动画效果。

<marqueebehavior="alternate">这是来回往返的反弹滚动效果</marquee>

三、滚动方向控制：direction 属性

direction属性用于控制内容滚动的方向，支持 4 个方向值，可灵活实现横向、纵向的全方向滚动。

1. 向左滚动（left，默认值）

标签的默认滚动方向，内容从右向左滚动，也是网站公告最常用的滚动方向。

<marqueedirection="left">内容从右向左滚动（标签默认方向）