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

张开发
• 2026/4/19 14:47:06 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

【HTML】HTML marquee 滚动标签：从基础属性到交互实战
HTML marquee 滚动标签：从基础属性到交互实战在网页开发中，滚动文字、公告通知是极为常见的需求，而 HTML 自带的marquee标签，正是实现滚动效果最快捷、最简单的方式之一。尽管在最新的 HTML 规范中，该标签已被标记为非标准标签、不推荐正式规范使用，但得益于其极简的用法、全浏览器兼容的特性，至今仍被广泛用于快速开发场景、后台系统、简易公告栏等需求中。本文将系统梳理marquee标签的所有核心用法，从基础滚动、方向控制，到速度调节、鼠标交互，帮你一篇掌握这个标签的全部实用技巧。一、基础用法：默认滚动效果最基础的marquee标签无需任何额外属性，只需包裹需要滚动的内容，即可实现默认的横向滚动效果，也是我们最常用的入门写法。marquee这是最基础的默认滚动文字效果/marquee效果说明：默认情况下，内容会从右向左无限循环滚动，也就是我们常说的“跑马灯”效果。二、核心行为控制：behavior 属性behavior属性用于定义滚动的核心行为模式，是决定滚动动画类型的关键属性，共有 4 个核心可选值，对应不同的滚动效果。1. 预设循环滚动（scroll，默认值）scroll是marquee标签的默认行为，即使不写该属性，也会默认启用。内容会从容器一端滚动到另一端，循环往复，无间断重复。marqueebehavior="scroll"这是预设的循环滚动效果（标签默认行为）/marquee2. 单次滑动效果（slide）slide滑动模式下，内容会从起始端滑动到容器的另一端，到达边界后立即停止滚动，不会循环播放。marqueebehavior="slide"这是单次滑动效果，到达边界后自动停止/marquee3. 来回往返滚动（alternate）alternate是反弹往返效果，内容滚动到容器边界后，会自动反向弹回，实现来回往复的滚动，类似“撞墙反弹”的动画效果。marqueebehavior="alternate"这是来回往返的反弹滚动效果/marquee三、滚动方向控制：direction 属性direction属性用于控制内容滚动的方向，支持 4 个方向值，可灵活实现横向、纵向的全方向滚动。1. 向左滚动（left，默认值）标签的默认滚动方向，内容从右向左滚动，也是网站公告最常用的滚动方向。marqueedirection="left"内容从右向左滚动（标签默认方向）

更多文章