开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

marquee标签

<marquee> 标签是一个在 HTML 中用于创建滚动文本或图像效果的标签。然而，需要注意的是，<marquee> 并不是一个标准的 HTML 标签，而是由早期的浏览器（如 Netscape 和 Internet Explorer）支持的一个非标准特性。因此，在现代的网页开发中，建议避免使用 <marquee> 标签，而是使用 CSS3 和 JavaScript 来实现类似的效果。

基础概念

<marquee> 标签的基本语法如下：

<marquee behavior="scroll" direction="left" scrollamount="5">
  这里是滚动的文本或图像
</marquee>

behavior 属性定义滚动的方式，可以是 scroll（连续滚动）、slide（滑动一次）或 alternate（来回滚动）。
direction 属性定义滚动的方向，可以是 left、right、up 或 down。
scrollamount 属性定义滚动的速度。

相关优势

简单易用：只需几个属性就可以实现滚动效果。
兼容性：在早期的浏览器中具有良好的兼容性。

类型

水平滚动：通过设置 direction="left" 或 direction="right"。
垂直滚动：通过设置 direction="up" 或 direction="down"。

应用场景

简单的滚动文本或图像效果，如新闻滚动条、广告横幅等。

存在的问题及解决方法

非标准标签：<marquee> 不是 HTML 标准标签，可能导致在现代浏览器中的兼容性问题。
可访问性问题：滚动文本可能对某些用户（如阅读障碍用户）造成困扰。
样式限制：<marquee> 标签的样式选项有限，难以实现复杂的滚动效果。

示例代码（使用 CSS3 实现水平滚动效果）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平滚动示例</title>
<style>
.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div class="marquee">
  <span>这里是滚动的文本或图像</span>
</div>
</body>
</html>

以上代码使用 CSS3 动画实现了一个水平滚动的效果，兼容性更好，且更易于定制和维护。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

marquee 标签的使用详情

marquee>标签，它是成对出现的标签，首标签marquee>和尾标签marquee>之间的内容就是滚动内容。...marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等...behavior属性 behavior属性的参数值为alternate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次，需要注意的是：如果在marquee>标签中同时出现了...表示运动区域的背景色，值是16进制的RGB颜色，默认为白色　　height、width 表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度...此元素需要关闭标签。示例　　下面的例子使用了 MARQUEE 元素创建了由左向右的滚动字幕，移动速度为每 200 毫秒 10 像素。

2.6K3 0

marquee 标签参数详细说明

marquee 元素（marquee>）可以用来插入一段滚动的文字，实现类似走马灯的动效。但这个标签已经过时（MDN文档已经不建议使用），此前因之前项目紧急用过，做个标签参数小结。...marquee> 2. 方法 start：开始滚动 marquee。 stop：停止滚动 marquee。上面两个方法通常和鼠标事件配合，来实现“鼠标移入停止滚动，鼠标一开开始滚动”的效果。...marquee> 3. 事件回调 onbounce：当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。...onfinish：当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。 onstart：当 marquee 开始滚动时触发。...; } 参考文章： MDN文档 Marquee标签 html之marquee详解（超详细！）

2.5K1 0

JS魔法堂：通过marquee标签实现信息滚动效果

根据信息滚动效果我们可以有很多的实现方式，但HTML自带的 marquee标签是其中一个较简单的实现方式。下面记录一下，供日后查阅。...二、 marquee标签的基础知识　　　　　　　　　　　　　　　　　　　　　　　　　　示例： marquee behavior="scroll" direction="left" loop="-1..." scrollAmount="12" scrollDelay="42"> 滚动的信息 marquee> 属性 behavior ，滚动的方式。 ...三、鼠标悬浮暂停滚动、移除即恢复滚动　　　　　　　　　　　　　　　　　　　　 marquee onmouseover="this.stop();" onmouseout="this.start();..."> 滚动的消息 marquee> 四、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　当我们只需实现当条特别公告等简单信息滚动效果时，marquee标签是一个很不错的选择

4K7 0

HTML滚动标签marquee的属性及效果实现

现在 marquee> 元素已经废弃，但有时候还是会用的到。虽然一些浏览器还支持，但是不推荐使用，因为说不定什么时候就不支持了。 ?...marquee 滚动标签常用属性 behavior 滚动方式 loop 循环次数 scrollamount 滚动时间 direction 滚动方向: bgcolor 背景颜色 height 高度 width...FFF 颜色 red 高度 height 语法： height="" 高度参数： number 数字（1、2、3）宽度 width 同上声明：本文由w3h5原创，转载请注明出处：《HTML滚动标签...marquee的属性及效果实现》 https://www.w3h5.com/post/303.html

2.5K1 1

Js 实现 marquee 效果

marquee的要求是两段文字的间隔能人为的控制，所以用了两个重复的p标签。...然后就是如何计算第一个p标签和第二个p标签移出了可视区域，可视区域不一定是屏幕宽度，可能是一个div设置了width和overflow实现的。另外就是从左往右以及从右往左的区别。...从左往右同样的思路，从左往右，刚开始第一个p标签也是位于 left: 0 的位置。...两个p标签间隔多少就看，第一个p标签开始移动多少距离后让第二个p标签开始移动，这个值就可以直接设定了。...this.marquee(); }, fontsize: function () { this.marquee(); },

8.1K2 0

Vue开发组件之替代marquee标签，超出宽度文字横向滚动效果

一、npm 安装如果你想安装插件（自己写的）安装 install dependencies npm i marquee-components 使用在main.js引入 import marquee...from ‘marquee-components’ Vue.use(marquee ); 在页面使用 marquee :val...="msg">marquee> export default { name: 'app', data () { return...二、直接引入组件 marquee组件 marquee-wrap"> marquee">{{text}} {{text}} </

2.4K3 0

marquee用到的属性

一、marquee标签的几个重要属性： 1.direction：滚动方向(包括4个值：up、down、left、right) 说明：up：从下向上滚动；down...) 语法：marquee loop=”2″>…marquee> marquee...marquee> marquee loop=”2″ bgcolor=”#CCCCCC”>我只走两次哦marquee> 6.width...>marquee> 11.color：设定滚动字幕的文字颜色语法：marquee color=”#333″>marquee>...语法：marquee STRONG>marquee> 二、marquee常用到的两个事件： onMouseOut=”this.start

2K1 0

HTML之marquee(文字滚动)详解

语法： marquee>marquee> 以下是一个最简单的例子：代码如下: marquee>Hello, Worldmarquee...> 该标签支持的属性多达11个： align 设定marquee>标签内容的对齐方式 absbottom：绝对底部对齐（与g、p等字母的最下端对齐） absmiddle：绝对中央对齐 baseline...marquee> marquee direction="left">设定活动字幕的滚动方向direction="left"：向左marquee> marquee direction="right...marquee> marquee behavior=slide>只走一次就歇了！...marquee> marquee behavior=alternate>来回走marquee> 循环 #=次数；若未指定则循环不止(infinite) marquee loop

8.4K16 3

HarmonyOS-UIAbitity-Marquee——【坚果派-红目香薰】

HarmonyOS-UIAbitity-Marquee 跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。...接口 Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?...direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Marquee...animation complete onStart') }) .onBounce(() => { console.log('Marquee...animation complete onBounce') }) .onFinish(() => { console.log('Marquee

1411 0

Vue文字滚动插件marquee-components优化

实现单行文字水平滚动，在网上看了一个vue插件 marquee-components 安装 npm i marquee-components 使用在main.js中引入 import marquee...from 'marquee-components' Vue.use(marquee ); 在页面中使用 marquee :val...:val="title">marquee> import marquee from '..../marquee' name: 'index', components: { marquee }, data () { return { title: '' }..." ref="marqueeWrap"> marquee" ref="marquee

3.9K1 0

marquee内部数据动态生成时，首次加载会闪跳问题

marquee 元素（marquee>）可以用来插入一段滚动的文字，实现类似走马灯的动效。...尽管它已经过时（MDN文档已经不建议使用），但不得不说，在快速实现文字滚动时，这个标签依旧简单粗暴。...解决方案我尝试过再marquee>内部放置一个空内容标签，指定一个足够长的宽度，比如这样： marquee>marquee> 但并没有什么用...后面想，什么静态宽度，干脆等有数据了，再构建marquee标签好了。嗯，这种方式可以解决问题。 <!...小结本次在问题重现上走了很多弯路，最初以为是布局样式或者是标签属性设置问题，后来偶然发现闪跳的时机（闪跳的宽度）才想到了静态宽度。所以静态标签和动态创建数据会有出入，需要小心。

1.1K1 0

HTML跑马灯

引言 HTML提供了一种非常简单实现跑马灯效果的标签，Marquee标签，通过设置不同的属性，可以实现不同的跑马灯效果：跑马灯的背景及背景宽123 高77 背景色为#f5f5f5的滚动区域： marquee...marquee> 这是一个跑马灯跑马灯速度 scrollamount：数值越大，滚动速度越快通常设为5-10 marquee scrollamount="7">这是一个速度为7的滚动marquee..."right">向右滚动marquee> 向右滚动跑马灯循环 loop：设置跑马灯循环次数；默认值为-1或infinite，表示无限循环滚动 marquee loop="3">这是一个循环三次滚动...marquee> 这是一个循环三次滚动跑马灯滚动方式 behavior：可设为默认为循环滚动 marquee...behavior="alternate">这是一个跑马灯marquee> 这是一个跑马灯跑马灯延迟 scrolldelay：数值值越大，滚动速度越慢，通常不设置 marquee scrolldelay

1.7K2 0

HTML 入门 ( 一 )

HTML文档创建首先创建一个txt文本文档修改文件后缀 HTML标签标签结构标签又称为元素,是HTML的基本组成单位分为: 双标签与单标签推荐小写标签名结构: 双标签示例代码: marquee...marquee> 单标签示例代码: 标签的并列与嵌套 marquee> My name is Kvein.... marquee> HTML标签属性标签的属性用于给标签提供附加信息,具体结构如下图: marquee loop = "1" bgcolor = "orange">...marquee> 网页呈现: 标签中不要出现同名属性,否则后写的会失效: 例如 HTML的基本结构 ...marquee> 如果对你有帮助的话,请继续支持我吧~

721 0

史上最全html,搞定OF COURSE.

假标签: marquee标签 39-marquee标签...--滚动方向--> marquee>随便写点内容marquee> marquee direction="right">随便写点内容marquee> marquee direction="up..., 例如我们学习了<h1>标签, <table>标签, <img>标签....

6363 1

Html跑马灯代码大全(图片文字移动代码)

很多时候在做前端开发的时候都不记得html标签，比如要做一个跑马灯公告，往往要百度，以下是html跑马灯标签的一些参数 marquee>......marquee>普通卷动 marquee behavior=slide>...marquee>滑动 marquee behavior=scroll>......marquee>预设卷动 marquee behavior=alternate>...marquee>来回卷动 marquee direction=down>......marquee>向上卷动 marquee direction=right>marquee>向右卷动 marquee direction=’left’>marquee>向左卷动 marquee...marquee>卷动次数 marquee width=180>...marquee>设定宽度 marquee height=30>...

7K4 0

滚动效果——marquee的html样式和CSS属性

html样式和CSS属性 marquee> 是滚动标签marquee>的属性 marquee>这是滚动效果——欢迎来到田小檬的博客marquee> 说明： scrolldelay，滚动延时，用于设定两次滚动操作之间的间隔时间

2.2K3 0

html核心知识点（一切只讲核心）希望你我身处核心中央，是我最大的梦想。oh也。

DOCTYPE html> 39-marquee标签...-- 1.什么是marquee标签?...loop: 设置滚动次数, 默认是-1, 也就是无限滚动 behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回注意点: marquee标签不是W3C推荐的标签...--滚动方向--> marquee>随便写点内容marquee> marquee direction="right">随便写点内容marquee> marquee direction="up..., 例如我们学习了<h1>标签, <table>标签, <img>标签....

1.1K2 0

marquee一行代码实现滚动跑马灯效果无需js

网站设计案例展示一般用幻灯片切换会比较高大上，但这需要用到js，第三方博客等网站不支持外嵌js，或者有些网友不知道怎么用，有一种方法可以解决，用marquee>marquee>标签，可以实现多种滚动效果...marquee标签不仅可以滚动文字，也可以滚动图片，表格等，而且使用起来方便快捷，节省了不少时间。实现效果可以看右侧栏。怎么用呢？...> 一、marquee标签的几个重要属性： 1.direction：滚动方向(包括4个值：up、down、left、right) 说明：up：从下向上滚动...marquee> marquee loop="2" bgcolor="#CCCCCC">我只走两次哦marquee> 6.width...size="3">marquee> 13.STRONG：设定滚动字幕的文字加粗语法：marquee STRONG>marquee> 二、marquee常用到的两个事件

5.9K5 0

【HTML】HTML 标签 ② ( 排版标签 | 标题标签 | 段落标签 | 水平线标签 | 换行标签 | div 标签 | span 标签 )

文章目录一、排版标签 1、标题标签 2、段落标签 3、水平线标签 4、换行标签 5、div 标签和 span 标签 HTML 常用的标签有如下类型 : 排版标签文本格式化标签图像标签链接标签..., 其中链接涉及到相对路径与绝对路径问题 ; 一、排版标签 ---- 排版标签是网页布局中 , 最常用的标签 , 排版标签又分为如下几个类型 : 标题标签段落标签水平线标签换行标签...div 标签 span 标签 1、标题标签 HTML 提供了 6 个等级的标题 , 分别是一级标题二级标题三级标题...水平线标签 , 可以在网页中添加一条分割横线 , 标签代码如下 : 在标题下添加了标签后的效果 , 在网页中 , 显示了一条横线 ; 4、换行标签换行标签 : 标签 div 标签和 span 标签都用于网页布局 ; div 标签一行只能设置一个 ; 布局内容 span 标签一行可以设置多个 ;

10.1K3 0

其他标签及框架集

今天学习了其他一些标签以及框架集。 marquee> ......marquee> 1 marquee direction="down" height="300" behavior="scroll" loop="2" scrollamount="12".../动态壁纸/壁纸2/preview.jpg" /> 3 marquee> 移动效果包含在marquee>marquee>内的标签移动。内容可以是文字，也可以是图片等。应用较少。...，slid只有一次，alternate来回滚动　　loop：滚动的次数　　scrollamount：滚动的速度　　scrolldelay：滚动的延时　　bgcolor：背景色　　单标签...标签也可以互相嵌套来进行分割。

1.7K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭