marquee-js 是一个 npm 包，能够在网页上创建一个跑马灯效果。本文将详细介绍该 npm 包的使用方法，包括安装、导入、初始化以及相关样式的调整。
安装
通过 npm 安装 marquee-js，可以使用以下命令：
npm install marquee-js
导入
在安装完成后，使用以下代码将 marquee-js 导入到你的项目中：
import Marquee from 'marquee-js';
初始化
使用以下代码初始化 marquee-js：
const marquee = new Marquee(".marquee", {
duration: 5000,
direction: "left",
gap: 50,
delayBeforeStart: 0,
loop: true
});
marquee.start();在初始化中，我们需要传递两个参数，第一个参数是包含跑马灯文本的 DOM 元素选择器，第二个参数是一个对象，用于指定跑马灯的属性，具体说明如下：
duration- 跑马灯滚动一次所需的时间，单位为毫秒，默认为 5000direction- 跑马灯滚动的方向，可选值为 "left" 或 "right"，默认为 "left"gap- 跑马灯滚动完一次后停留的时间，单位为毫秒，默认为 50delayBeforeStart- 跑马灯滚动前的延迟时间，单位为毫秒，默认为 0loop- 跑马灯是否无限循环，默认为 true
使用 start() 方法开始跑马灯。
样式调整
跑马灯的样式可以通过对包含跑马灯文本的 DOM 元素添加 CSS 样式来实现。例如，以下 CSS 样式使得跑马灯在页面的顶部水平滚动，文本颜色为白色，背景颜色为红色：
-- -------------------- ---- -------
-------- -
--------- ------
---- --
----- --
------ -----
------- -----
----------------- ----
------ ------
---------- -----
------------ -------
--------- -------
-示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------
-------
-------- -
--------- ------
---- --
----- --
------ -----
------- -----
----------------- ----
------ ------
---------- -----
------------ -------
--------- -------
-
--------
-------
------
---- -------------------------------
------- -------------------------------------------------------
--------
----- ------- - --- ------------------- -
--------- -----
---------- -------
---- ---
----------------- --
----- ----
---
----------------
---------
-------
-------以上示例代码中，我们通过 CDN 引用了 marquee-js，使用了 CSS 样式设置了跑马灯在页面的位置、颜色、字体大小等属性，使用了 JavaScript 代码初始化并启动了跑马灯。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c7481e8991b448e5f06