js文字滚动marquee

基础概念

<marquee> 是一个HTML标签，用于创建文字或图像的滚动效果。尽管它在HTML5中已被废弃，但在一些老旧的浏览器中仍然可以使用。现代网页设计中，通常使用CSS和JavaScript来实现类似的效果。

类型

水平滚动：文字从右向左或从左向右滚动。
垂直滚动：文字从下向上或从上向下滚动。
循环滚动：文字滚动到尽头后会重新开始滚动。

应用场景

新闻滚动条：在网站的顶部或底部显示最新的新闻标题。
广告滚动：用于展示广告信息。
通知提示：显示系统通知或提示信息。

示例代码

以下是一个简单的水平滚动文字的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marquee Example</title>
    <style>
        .marquee {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
        }
        .marquee span {
            display: inline-block;
            padding-left: 100%;
            animation: marquee 15s linear infinite;
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <div class="marquee">
        <span>这是一个水平滚动的文字示例。</span>
    </div>
</body>
</html>

遇到的问题及解决方法

问题1：文字滚动速度过快

原因：动画时间设置过短。

解决方法：调整 @keyframes 中的动画时间。

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

将 15s 调整为更长的时间，例如 30s。

问题2：文字滚动不流畅

原因：可能是由于浏览器性能问题或CSS动画设置不当。

解决方法：

确保使用最新版本的浏览器。
优化CSS动画，避免使用过多的复杂效果。

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

问题3：文字滚动方向不正确

原因：动画方向设置错误。

解决方法：调整 @keyframes 中的 transform 属性。

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

这样文字将从右向左滚动。

总结

尽管 <marquee> 标签在现代网页设计中已不推荐使用，但通过CSS和JavaScript可以实现类似的效果，并且具有更好的控制和兼容性。通过调整动画时间和方向，可以解决常见的滚动问题。

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

有帮助

没帮助

相关·内容

HTML之marquee(文字滚动)详解

marquee> 移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等鼠标属性 onMouseOut=this.start() ........鼠标移出状态滚动 onMouseOver...#999999" style="color: #ffffff; font-size: 14; font-family: '宋体', 'Arial','Helvetica', 'sans-serif'"title=文字内容...> 这是放文字或需要移动的图片（光标放在这里时用INSERT命令就可以插入图片）marquee> marquee的滚动属性参数从marquee>开始到marquee>结束,其中有很多参数...当LOOP=-1或LOOP=INFINITE时，则表明文字滚动是无限循环（默认） 4：速度：SCROLLDELAY 任意自然整数 5：对齐：ALIGN TOP---------对齐上方 MIDDLE-...=2 scrollDelay=50 direction=up width=200 height=200 behavior=scroll>要滚动的文字MARQUEE></TBODY

8.4K16 3

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 '....}, 但是如果一个页面有几个需要滚动的文字，需要修改代码，主要把原代码的通过选择器获取元素的方式修改为通过通过ref获取元素 marquee" ref="marquee">{{text}} {{text}}

4K1 0

js实现文字竖向滚动

/js/vue.js"> js/jquery-1.11.1.min.js"> (function (doc, win) { // 移动端适配 var...白衣扶2112弦领取247.11元现金 js

23.4K1 0

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

4K7 0

Js 实现 marquee 效果

使用RequestAnimationFrame，核心部分就是利用transformX实现位移 Js 逻辑写的比较挫，还要想想怎么改进，或者有更好的思路。...marquee的要求是两段文字的间隔能人为的控制，所以用了两个重复的p标签。...3，说明文字的末尾已经出现在‘可视区域’，此时➕一个系数x，就可以实现两段文字的间隔（x按照实际想要的间隔自行设置）。...此时第一段文字+间隔已经全部出现在可视区域了，接下来就要让第二段文字开始移动。第二段文字的起始位置就是‘可视区域’的宽度。...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...vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue' } } } 123456789101112131415 val后加文字即可...，当超过文本容器长度时，触动横向滚动效果。...二、直接引入组件 marquee组件 marquee-wrap"> <p class="

2.4K3 0

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

网站设计案例展示一般用幻灯片切换会比较高大上，但这需要用到js，第三方博客等网站不支持外嵌js，或者有些网友不知道怎么用，有一种方法可以解决，用marquee>marquee>标签，可以实现多种滚动效果...，无需js控制。...marquee标签不仅可以滚动文字，也可以滚动图片，表格等，而且使用起来方便快捷，节省了不少时间。实现效果可以看右侧栏。怎么用呢？...11.color：设定滚动字幕的文字颜色语法：marquee color="#333">marquee> 12.size：设定滚动字幕的文字字号语法：marquee...size="3">marquee> 13.STRONG：设定滚动字幕的文字加粗语法：marquee STRONG>marquee> 二、marquee常用到的两个事件

5.9K5 0

使用js实现横向文字重复滚动，超简单

背景因为公司系统需要实现横向文字滚动效果，所以自己手动写了一个，没用网上的，感觉网上的啰嗦繁琐，扩展性还不行，喜欢的话点赞收藏吧，下面是gif效果图。...hidden; //不可修改 margin-top: 2px; //上边框 margin-left: 250px; //左边距 } #text{ margin-left: 330px; //调整文字首次加载隐藏值...，这里数值大小取决于一开始文字滚动等待的时长 width:360px; //根据你的文字长度定义长度，这里定义好之后，基本js代码就不用动了 } js代码，上面修改好之后，基本不用动。

7.3K2 0

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

html样式和CSS属性 marquee> 是滚动标签marquee>的属性 marquee>这是滚动效果——欢迎来到田小檬的博客marquee> 说明： scrolldelay，滚动延时，用于设定两次滚动操作之间的间隔时间...，该时间以毫秒为单位 behavior，滚动方式 alternate：表示在两端之间来回滚动。...scroll：表示由一端滚动到另一端，会重复。 slide：表示由一端滚动到另一端，不会重复

2.2K3 0

实现文字滚动播放

实现文字滚动播放实现文字滚动播放，通过使用CSS3动画与Js控制来实现，由于使用CSS动画来控制偏移限制较多，因此通常还是使用Js来实现。...实现 CSS Animation 使用CSS动画方法，使用position: relative配合left属性来控制文字元素距离左侧相对偏移的距离。... 使用CSS动画方法，使用transform: translateX()属性来控制文字元素距离左侧相对偏移的距离，此方法同样也存在上述的问题... JavaScript 使用Javascript我们能够实现无缝滚动，即需要复制一份一样的元素至原元素的后方，当第一个元素滚动完成后我们立即将位置复原...container.offsetWidth; // 初始化向左偏移为容器大小 const loop = () => { if(count 文字偏移超出一个文字元素的宽度则复原

4K4 0

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

现在 marquee> 元素已经废弃，但有时候还是会用的到。虽然一些浏览器还支持，但是不推荐使用，因为说不定什么时候就不支持了。 ?...marquee 滚动标签常用属性 behavior 滚动方式 loop 循环次数 scrollamount 滚动时间 direction 滚动方向: bgcolor 背景颜色 height 高度 width...） number 数字（1、2、3） infinite 一直滚动滚动3次 infinite 一直滚动滚动方向 direction 语法： direction="" 滚动方向参数： left 左...right 右 down 下 up 上实例：向下滚动向上滚动向左滚动向右滚动滚动时间/速度 scrollamount 语法： scrollamount="" 滚动速度：默认值（600） number...marquee的属性及效果实现》 https://www.w3h5.com/post/303.html

2.5K1 1

前端基础-HTML文字滚动

1.文字滚动我的第一个页面 marquee behavior="scroll" direction="up... marquee> direction：方向 up:上 down：下 left：左 right：右 scrollamount:滚动速度...-----------------scroll：滚动 amount：数值 width：宽度 height：高度 onmouseover：当鼠标移上去 onmouseout：当鼠标离开 stop(...)：停止 start()：开始 behavior： scroll 循环滚动 alternate 来回滚动 slide 滚动一次停止

8.9K3 0

npm发布包以及更新包还有需要注意的几点问题（这里以发布vue插件为例）

└── webpack.config.js 2、接下来，我们在src文件夹下创建一个名叫marquee的文件夹，在文件夹里面创建marquee.vue和index.js marquee/ ├──...-- 滚动内容 --> marquee">{{text}} <!...('.getWidth').scrollWidth // 如果文本内容的宽度小于页面宽度，则表示文字小于等于一行，则不需要滚动 if (width 文字横向滚动Vue插件 1、安装 # install dependencies npm i marquee-components 2、使用在main.js引入 import marquee...当超过文本容器长度时，触动横向滚动效果。

1.1K4 0

其他标签及框架集

marquee> ....../动态壁纸/壁纸2/preview.jpg" /> 3 marquee> 移动效果包含在marquee>marquee>内的标签移动。内容可以是文字，也可以是图片等。应用较少。...marquee>主要属性有：　　direction：控制滚动的方向，down向下，up向上，left向左，righ向右　　其他属性：　　height：滚动区域高度，并不是图片高度，图片高度需要在...：滚动的速度　　scrolldelay：滚动的延时　　bgcolor：背景色　　单标签，用于显示一条分隔线　　标记文字，内容会有黄色背景,用作突出文本显示...*" noresize="noresize"> JS

1.7K7 0

liMarquee – jQuery无缝滚动插件

liMarquee 是一款基于 jQuery 的无缝滚动插件，类似于 HTML 的 marquee 标签，但比 marquee 更强大。...它可以应用于任何 Web 元素，包括文字、图像、表格、表单等元素，同时它可以设置不同的滚动方向（左右上下）、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等等。...Firefox ✔ Opera ✔ Safari ✔ 使用方法 1、引入文件 js.../jquery-1.9.0.min.js"> js/jquery.liMarquee.js"> 2、HTML <div class="dowebok...每次重复之前的延迟 scrollamount 整数 50 滚动速度，越大越快 circular 布尔值 true 无缝滚动，如果为 false，则和 marquee 效果一样 drag 布尔值 true

8.8K3 0

HTML新手上路随笔

但是使用js等效果的话，id必须唯一，不然js识别不到！...元素 marquee>marquee> 用来插入一段滚动的文字。...behavior：设置文本在 marquee 元素内如何滚动。可选值有 scroll(连续滚动)，slide(滑动一次) 和 alternate(往返滚动)。...direction：设置 marquee 内文本滚动的方向。可选值有 left, right, up and down。如果未指定值，默认值为 left。...loop：设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动. scrollamount ：设置每次滚动时移动的长度（以像素为单位）。

7435 0

npm发布包以及更新包还有需要注意的几点问题（这里以发布vue插件为例）

└── webpack.config.js2、接下来，我们在src文件夹下创建一个名叫marquee的文件夹，在文件夹里面创建marquee.vue和index.jsmarquee/├── index.html...│ │ └── marquee.vue│ │ └── index.js│ ├── assets│ │ └── logo.png│ └── main.js└── webpack.config.js3、开始在...marquee.vue封装Vue插件了 marquee-wrap"> 滚动内容 --> marquee">{{text}} 文字副本 --> <!

5362 0

我是这样写文字轮播的

功能点：文字无缝轮播（不要在意为什么在移动端还会有这样的需求） 3如何实现我们可以下面三种方法来进行实现： 1 marquee 当一说到文字无缝滚动时，大家最先想到的是marquee。...3 css3 + 少量js 再就是现在用到的css3 + 少量js，采用很少的代码就可以实现文字不同长度，文字条数不定的文字无缝滚动轮播。...4实现过程下面先看html结构：与图片的无缝滚动一样，也需要将第一条数据拷贝一份放在最后面其次是css的相关数据：由于IOS的一些渲染机制，最好滚动的元素内部都需要启动硬件加速，否则会有卡顿和文字显示不全的问题...最后是js：这里还是写的jquery，相信大家都能看的懂，就是让滚动元素的宽度等于他的内部元素的总宽度减去第一个（或者最后一个）元素的宽度，这样能保证无缝的效果。...最后要说明为什么要用js动态添加css3的类名实现滚动效果，一开始的时候我也是想直接将css3滚动特效写在滚动的元素上，但是在iPhone上发现首次加载当前页面的时候他不会自动滚动。

1.8K2 0

第4章 HTML5多媒体实现网站“家庭影院”

标签语法：标签的可选属性 4-2 marquee> 标签的属性值有哪些？...direction —— 表示文字滚动方向。（up、down、left 和 right） crollamount —— 表示文字滚动速度。 behavior —— 表示文字滚动方式。...scroll：表示循环滚动，默认效果。 slide：只滚动一次即停止。 alternate：来回交替进行滚动。 4-3 在网页中添加音频使用什么标签，该标签有哪些属性值？...使用标签添加各种功能的按钮，然后给相应功能的 button 添加 onclick 点击事件，在 js 代码中先拿到 video，给 video 添加 addEventListener...marquee class="left" direction="left" behavior="alternate"scrollamount="10">这里是弹幕——视频通俗易懂噢marquee>

1.6K3 0

marquee 标签的使用详情

behavior属性 behavior属性的参数值为alternate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次，需要注意的是：如果在marquee>标签中同时出现了...marquee> marquee behavior="slide" direction="up">我改向上只滚动一次了marquee> bgcolor属性文字滚动范围的背景颜色，参数值是16进制...和height属性 width和height属性的作用决定滚动文字在页面中的矩形范围大小。...marquee> loop属性 loop属性决定滚动文字的滚动次数，缺省是无限循环。参数值可以是任意的正整数，如果设置参数值为-1或infinite时将无限循环。...marquee> 最后说一下align属性，这个属性决定滚动文字位于距形内边框的上下左右位置。

2.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js文字滚动marquee

基础概念

相关优势

类型

应用场景

示例代码

遇到的问题及解决方法

问题1：文字滚动速度过快

问题2：文字滚动不流畅

问题3：文字滚动方向不正确

总结

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐