在现代 web 开发中，许多工具和库可以帮助我们更快、更高效地完成任务。npm 是 Node.js 的包管理器，它允许我们轻松地共享和安装代码包。zhanganyu 是一个 npm 包，它提供了在浏览器中创建字幕滚动效果的工具。下面是本文将介绍的内容：
- 安装 zhanganyu
- 使用 zhanganyu
- 具体示例
1. 安装 zhanganyu
使用 npm 安装 zhanganyu 组件可以采用以下命令：
npm install zhanganyu --save
安装命令执行完毕之后，将 zhanganyu 导入到项目中。
import Zhanganyu from 'zhanganyu';
也可以直接将 js 文件引用到 HTML 文件中。
<script src="https://unpkg.com/zhanganyu@1.0.0/dist/zhanganyu.min.js"></script>
2. 使用 zhanganyu
使用 zhanganyu 创建一个列表并实现字幕滚动效果有很多选项。以下是一个包含所有可能选项的初始化参数示例：
-- -------------------- ---- -------
----- ------- - -
--- -----------------
--------- -
-
-------- ------
---------- --
-------- -
--
-
-------- -------
---------- --
-------- -
--
-
-------- -------
---------- --
-------- -
--
-
-------- -----
---------- --
-------- --
-
--
---------- -
------ --------
--------- ------
--
------------------ -----
--------------- -----
----- -----
--
----- --------- - --- -------------------上面的文本会创建一个 24px 白色字体大小的列表，包含区块链、人工智能、机器学习和前端字样。并且在特定的时间点，例如 0 秒，区块链就会从右侧淡入，当时间到达 5 秒时，文字会向左淡出。同样，时间为 2 秒时，人工智能从右侧淡入，时间到了 6 秒时，而该字幕会从左侧淡出。
为了可视化效果，您应该在 HTML 文件中创建一个具有 id 为“zhanganyu-box”的元素。如下所示：
<div id="zhanganyu-box"></div>
3. 具体示例
下面是 zhanganyu 的具体应用示例，实现了字幕滚动的效果。
-- -------------------- ---- -------
------ --------- ---- ------------
----- ------- - -
--- -----------------
--------- -
-
-------- -------
---------- --
-------- -
--
-
-------- -------
---------- --
-------- -
--
-
-------- -------
---------- --
-------- -
--
-
-------- -------
---------- --
-------- --
-
--
---------- -
------ --------
--------- ------
--
------------------ -----
--------------- -----
----- -----
--
----- --------- - --- -------------------创建一个 ID 为 zhanganyu-box 的 div 元素，加载以上 JavaScript 文件，您应该可以看到字幕在页面上的滚动效果。
-- -------------------- ---- -------
---- -------------------------
------- -----------------------------------------------------------------------
--------
----- ------- - -
--- -----------------
--------- -
-
-------- ------
---------- --
-------- -
--
-
-------- -------
---------- --
-------- -
--
-
-------- -------
---------- --
-------- -
--
-
-------- -----
---------- --
-------- --
-
--
---------- -
------ --------
--------- ------
--
------------------ -----
--------------- -----
----- -----
--
----- --------- - --- -------------------
---------通过本文，您学习了 npm 包 zhanganyu 的使用方式，您可以使用 zhanganyu 在您的项目中创建出令人印象深刻的字幕滚动效果。有关更多详细信息，请查阅官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf481e8991b448e6ab9