js实现marquee

<marquee> 标签是 HTML 中用于创建滚动文字或图像的元素。然而，这个标签已经不被现代浏览器推荐使用，因为它不是 W3C 标准的一部分，并且在某些浏览器中可能无法正常工作。尽管如此，如果你仍然需要实现类似的效果，可以使用 JavaScript 和 CSS 来完成。

基础概念

HTML <marquee> 标签：一个非标准的 HTML 元素，用于创建滚动效果。
JavaScript：一种脚本语言，可以用来操作 HTML 文档，实现动态效果。
CSS：层叠样式表，用于描述 HTML 文档的外观和格式。

优势

使用 JavaScript 和 CSS 可以实现更灵活和可控的滚动效果。
可以兼容更多的浏览器和设备。
可以更容易地进行样式定制和维护。

类型

水平滚动：文字或图像从左到右或从右到左滚动。
垂直滚动：文字或图像从上到下或从下到上滚动。

应用场景

新闻网站的滚动新闻栏。
网站的公告板。
广告横幅。

实现方法

以下是一个使用 JavaScript 和 CSS 实现水平滚动的示例：

HTML

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="marquee-container">
        <span class="marquee-text">这是一个滚动文字的示例！</span>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

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

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

JavaScript (script.js)

// 如果需要动态控制滚动速度或其他属性，可以在这里添加逻辑

可能遇到的问题及解决方法

滚动速度过快或过慢：
- 调整 CSS 中 animation-duration 的值。

文字在某些设备上显示不完整：
- 确保 .marquee-container 的宽度足够，并且 .marquee-text 的长度不超过容器宽度。
动画卡顿：
- 检查是否有其他 JavaScript 或 CSS 影响性能，尝试优化代码或减少 DOM 操作。

通过这种方式，你可以实现一个简单且兼容性较好的滚动效果，而不依赖于非标准的 <marquee> 标签。

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

有帮助

没帮助

相关·内容

Js 实现 marquee 效果

使用RequestAnimationFrame，核心部分就是利用transformX实现位移 Js 逻辑写的比较挫，还要想想怎么改进，或者有更好的思路。...marquee的要求是两段文字的间隔能人为的控制，所以用了两个重复的p标签。...然后就是如何计算第一个p标签和第二个p标签移出了可视区域，可视区域不一定是屏幕宽度，可能是一个div设置了width和overflow实现的。另外就是从左往右以及从右往左的区别。...之类的一个倍数，用这个倍数和目前正在变化时拿到的translateX的值 / 可视区域的宽度假设是3倍，那么第二步计算出的值如果正好是3，说明文字的末尾已经出现在‘可视区域’，此时➕一个系数x，就可以实现两段文字的间隔...this.marquee(); }, fontsize: function () { this.marquee(); },

8.1K2 0

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

4K7 0

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

网站设计案例展示一般用幻灯片切换会比较高大上，但这需要用到js，第三方博客等网站不支持外嵌js，或者有些网友不知道怎么用，有一种方法可以解决，用marquee>marquee>标签，可以实现多种滚动效果...，无需js控制。...marquee标签不仅可以滚动文字，也可以滚动图片，表格等，而且使用起来方便快捷，节省了不少时间。实现效果可以看右侧栏。怎么用呢？...marquee> marquee loop="2" bgcolor="#CCCCCC">我只走两次哦marquee> 6.width...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

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

marquee用到的属性

) 语法：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...>参数不少，但毕竟不能实现复杂的和自定义的特殊跑马灯效果，而且还有浏览器限制，所以我们更多情况下会采用JavaScript来实现跑马灯滚动效果。

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

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

纯css3跑马灯demo

这里主要的思路就是用css3代替js定时器实现一个简单的跑马灯。...1、基本思路这次demo主要是通过css3中的animation动画实现，借助transform中的translateY属性的增减实现dom位置的变化，让它跑起来。...根据css3动画原理，在100%的时候无限循环状态下，动画会自动重叠到进度0的状态，进而实现循环动画。 ...如果容器内会同时出现两条或以上文本内容时，可以在class="label_txt"位置再添加首尾项，实现动画的链接。综上我们就实现了完全由css3达成的跑马灯效果。...less在部分插件中可以实现获取dom相关内容，但是还是需要引入js，本质上还是通过js获取dom数量另一种思路就是保留固定长度，通过js填充或打乱重选保证dom数量。

2.1K2 0

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

MyComponent 待开发组件文件夹 │ │ ├─ __tests__ 组件单元测试文件 │ │ │ └─ index.test.js...│ │ ├─ types │ │ │ └─ index.d.ts │ │ ├─ index.js...│ │ ├─ index.umd.js │ │ └─ package.json...要实现跑马灯效果需要编写关键帧动画及控制动画播放的行为, 在关键帧动画中通过 transform 实现在 X 轴上的移动, 并控制动画线性播放且无限循环....组件单元测试在创建组件时已经配套生成了一根单元测试文件, 接下来的单元测试就从 components/MyMarquee/__tests__/index.test.js 开始.

2303 0

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

└── webpack.config.js 2、接下来，我们在src文件夹下创建一个名叫marquee的文件夹，在文件夹里面创建marquee.vue和index.js marquee/ ├──...│ │ └── marquee.vue │ │ └── index.js │ ├── assets │ │ └── logo.png │ └── main.js └──.../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 ├─

1.1K4 0

HTML新手上路随笔

因此，我们只要把特定网站域名都映射为127.0.0.1就可以实现屏蔽网站的效果了。...solid #000 代表设置对象边框宽度为1px黑色实现边框 id唯一的原因如果只是用来定义样式的话可以！...但是使用js等效果的话，id必须唯一，不然js识别不到！...元素 marquee>marquee> 用来插入一段滚动的文字。...loop：设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动. scrollamount ：设置每次滚动时移动的长度（以像素为单位）。

7435 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

4K1 0

js实现websocket

import {UserManager} from "@/utils/userManager.js"; class webSocketClass { constructor(url="ws://127.0.0.1

1.1K5 0

js实现继承

js实现继承经典继承(原型链) 缺点：过多的继承了没用的属性 Grandfather.prototype.lastName = 'zhang' function Grandfather() {

5.3K2 0

Webpack组件库打包超详细指南

enter.js import dialog from './component/dialog/dialog.js' import marquee from '..../component/marquee/main.js' import toast from '..../component/toast/toast.js' //…… const components = { dialog, marquee, toast, //…… }...//components.json { "marquee": "component/marquee/main.js", "toast": "component/toast/toast.js...按需引入组件既然实现了单个组件的打包，我们当然不会每次都引入整个的组件库，在我们把组件库发布到tnpm后，为了引入单个组件，我们可以这样。

3.2K1 1

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

/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

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

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

2.2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js实现marquee

基础概念

优势

类型

应用场景

实现方法

HTML

CSS (styles.css)

JavaScript (script.js)

可能遇到的问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐