开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 替代 marquee

<marquee> 标签曾经被用于在网页上创建滚动文本效果，但由于它不是HTML标准的一部分，并且在现代浏览器中不被支持或正在计划移除支持，因此不推荐使用。JavaScript 可以用来创建类似的滚动效果，并且提供了更多的控制和灵活性。

以下是使用 JavaScript 替代 <marquee> 标签的一些基础概念、优势、类型、应用场景以及解决方案：

基础概念

DOM 操作：JavaScript 可以操作网页的文档对象模型（DOM），从而动态地修改页面内容。
事件监听：通过监听特定事件（如页面加载完成），可以触发滚动效果的开始。
定时器：使用 setTimeout 或 setInterval 函数可以控制滚动的速度和节奏。

优势

兼容性：JavaScript 在所有现代浏览器中都有很好的支持。
灵活性：可以轻松定制滚动效果，包括速度、方向、暂停和恢复等。
可访问性：可以更好地控制滚动行为，以适应不同的用户需求和设备。

类型

水平滚动：文本或图像从右向左或从左向右滚动。
垂直滚动：文本或图像从上向下或从下向上滚动。
自定义路径滚动：文本或图像沿着自定义路径移动。

应用场景

新闻滚动：在网站顶部显示最新新闻标题。
公告展示：在网站底部显示重要公告。
广告横幅：在网页中展示滚动的广告内容。

解决方案

以下是一个简单的水平滚动文本的 JavaScript 示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Marquee Example</title>
<style>
  .marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .marquee-content {
    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-container">
  <div class="marquee-content">
    这里是滚动的文本内容，可以是新闻标题、公告或广告等。
  </div>
</div>

</body>
</html>

在这个示例中，我们使用了 CSS3 的 animation 属性来创建滚动效果，这样可以避免使用 JavaScript 定时器，从而提高性能。如果需要更复杂的控制，可以使用 JavaScript 来动态修改样式或内容。

遇到的问题及解决方法

滚动速度控制：可以通过调整 CSS 中 animation-duration 的值来控制滚动速度。
暂停和恢复滚动：可以使用 JavaScript 来添加或移除 CSS 类，从而控制动画的播放状态。
响应式设计：确保滚动容器和内容能够适应不同屏幕尺寸，可以使用百分比宽度和媒体查询来实现。

通过上述方法，你可以使用 JavaScript 和 CSS 创建出既现代又兼容的滚动效果，替代过时的 <marquee> 标签。

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

有帮助

没帮助

相关·内容

Js 实现 marquee 效果

使用RequestAnimationFrame，核心部分就是利用transformX实现位移 Js 逻辑写的比较挫，还要想想怎么改进，或者有更好的思路。...marquee的要求是两段文字的间隔能人为的控制，所以用了两个重复的p标签。...currentDirection: true } }, watch: { during: function () { this.marquee...(); }, content: function () { this.marquee(); }, width: function () {...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

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

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

网站设计案例展示一般用幻灯片切换会比较高大上，但这需要用到js，第三方博客等网站不支持外嵌js，或者有些网友不知道怎么用，有一种方法可以解决，用marquee>marquee>标签，可以实现多种滚动效果...，无需js控制。...marquee> marquee loop="2" bgcolor="#CCCCCC">我只走两次哦marquee> 6.width...11.color：设定滚动字幕的文字颜色语法：marquee color="#333">marquee> 12.size：设定滚动字幕的文字字号语法：marquee...size="3">marquee> 13.STRONG：设定滚动字幕的文字加粗语法：marquee STRONG>marquee> 二、marquee常用到的两个事件

5.9K5 0

HTML之marquee(文字滚动)详解

语法： marquee>marquee> 以下是一个最简单的例子：代码如下: marquee>Hello, Worldmarquee...marquee> marquee align="top">align="top"：顶部对齐。...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

marquee 标签的使用详情

marquee>标签，它是成对出现的标签，首标签marquee>和尾标签marquee>之间的内容就是滚动内容。...marquee behavior="alternate">我来回滚动marquee> marquee behavior="scroll">我单方向循环滚动marquee>marquee...如下所示： marquee direction="right">我向右滚动marquee> marquee direction="right">我向下滚动marquee> width...如下所示： marquee loop="2">我滚动2次。marquee> marquee loop="infinite">我无限循环滚动。...marquee> marquee loop="-1">我无限循环滚动。

2.6K3 0

marquee用到的属性

语法：marquee scrollamount=”5″>…marquee> 4.scrolldelay:设定滚动两次之间的延迟时间，值大了会有一步一停顿的效果(设置滚动的时间间隔...) 语法：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

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数组操作--使用迭代方法替代for循环

数组的迭代方法，这个想必大家都不陌生了，可能刚入门的人暂时还没接触到这个。但是以后的开发中，肯定会用得上的。我自身的一个使用经历就是，如果迭代方法用的适当，不但...

3.3K4 1

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

└── webpack.config.js 2、接下来，我们在src文件夹下创建一个名叫marquee的文件夹，在文件夹里面创建marquee.vue和index.js marquee/ ├──.../src/main.js' : './src/marquee/index.js', output: { path: path.resolve(__dirname, '....否则就使用匿名的 define }, } 3、打包 npm run build 如果成功的话，根目录下会出现dist文件夹，里面分别是marquee.js和marquee.js.map marquee.../ ├── dist │ ├── marquee.js │ ├── marquee.js.map ├── index.html ├── package.json ├── README.md ├─...回车出现 Logged in as maomincoding on http://registry.npmjs.org,那么就登陆成功了 3、上传发布 npm publish 第五步，插件下载使用替代

1.1K4 0

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

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

─ .babelrc├── .editorconfig├── .gitignore├── src│ ├── App.vue│ ├── assets│ │ └── logo.png│ └── main.js...└── 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

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的html样式和CSS属性

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

2.2K3 0

Bun 1.0 作为 Node.js 和 Deno 的替代品发布

Bun 1.0 作为 Node.js 和 Deno 的替代品发布 Bun 1.0 已经发布;它被设计成 Node.js 的替代品。Bun 速度很，但速度是唯一重要的因素吗？...最近在用 next.js 做一个东西，感觉对 node.js 和 React 相关的工具很感兴趣。...构建用于速度 Bun 与 Node.js 以及基于 Rust 的 Deno 竞争，两者都是由 Ryan Dahl 创建的。事实上，根据周四播出的发布直播，它被设计成 Node.js 的替代品。...Bun 是一个向下兼容的 Node.js 替代品，可以运行 Typescript 和 TSX 文件，不需要依赖。”...“Node.js、Bun 和 Deno 都是服务器端 js 运行时，但它们有完全不同的目标。在 Bun 和 Node.js 之间的选择取决于你项目的需求，”Tewari 建议说。

1991 0

『组件』大转盘、刮刮乐、老虎机……

/utils/dial.js' JS中实例调用： let dial = new Dial(this, { areaNumber: 8, //抽奖间隔 speed: 16,.../utils/machine.js' JS中实例调用： this.machine = new Machine(this, { height: 40, //单个数字高度 len:.../utils/marquee.wxss' WXML中引用结构：marquee.wxml"/> JS中引用：import Marquee from '..../utils/marquee.js' JS中实例调用： this.marquee = new Marquee(this, { len: 9, //宫格个数 ret: 9, //抽奖结果对应值.../utils/shake.js' JS中实例调用： this.shake = new Shake(this, { shakeThreshold: 70, //阈值 callback: (

3.7K6 0

基于 Quarkc 的 WCD 模板工程使用指南

MyComponent 待开发组件文件夹 │ │ ├─ __tests__ 组件单元测试文件 │ │ │ └─ index.test.js...│ │ ├─ types │ │ │ └─ index.d.ts │ │ ├─ index.js...│ │ ├─ index.umd.js │ │ └─ package.json...组件单元测试在创建组件时已经配套生成了一根单元测试文件, 接下来的单元测试就从 components/MyMarquee/__tests__/index.test.js 开始..../my-marquee>` ); 确认属性值一致 expect(el.title).to.equal(data.title); 下面是对其他组件属性的单元测试案例 describe("marquee

2303 0

纯css3跑马灯demo

我们写跑马灯一般都是用js控制定时器不断循环产生，但是定时器消耗比较大，特别是程序中很多用到定时器的时候，感觉有的时候比较卡。但是css3样式一般不会。...这里主要的思路就是用css3代替js定时器实现一个简单的跑马灯。...15s linear infinite; animation: marquee 15s linear infinite; } @keyframes marquee { 0% {...less在部分插件中可以实现获取dom相关内容，但是还是需要引入js，本质上还是通过js获取dom数量另一种思路就是保留固定长度，通过js填充或打乱重选保证dom数量。...比如我们设置一个的位移量等于14个dom节点的高度，在配置内容不足时，通过js循环一下补充到14个。而一旦大于就只能删除一部分了或者随机填充。

2.1K2 0

HTML新手上路随笔

但是使用js等效果的话，id必须唯一，不然js识别不到！...元素 marquee>marquee> 用来插入一段滚动的文字。...loop：设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动. scrollamount ：设置每次滚动时移动的长度（以像素为单位）。...cursor:wait"> wait help 判断H5外链接JS...状态判断css和js是否外联成功，一个是打开谷歌浏览器调试选定相应元素查看style，另一个就是找到调试中的Network 模块（Ctrl+ R）看有没有外联文件

7435 0

liMarquee – jQuery无缝滚动插件

liMarquee 是一款基于 jQuery 的无缝滚动插件，类似于 HTML 的 marquee 标签，但比 marquee 更强大。...Firefox ✔ Opera ✔ Safari ✔ 使用方法 1、引入文件 js.../jquery-1.9.0.min.js"> js/jquery.liMarquee.js"> 2、HTML <div class="dowebok...1 为无限循环 scrolldelay 整数 0 每次重复之前的延迟 scrollamount 整数 50 滚动速度，越大越快 circular 布尔值 true 无缝滚动，如果为 false，则和 marquee

8.8K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭