在前端开发中，我们经常需要使用各种各样的第三方库和工具，而 npm (Node Package Manager) 就是一个非常重要的包管理工具。它可以帮助我们简单快捷地安装、管理和更新我们项目中的依赖。
在 npm 上，有许多优秀的前端库可供选择。其中，stron 是一个使用简单的 zooming 库，可以帮助我们实现图片的放大缩小功能。本文将为大家介绍 npm 包 stron 的使用教程。
安装 stron
首先，我们需要安装 stron。在命令行中运行以下命令：
npm install stron --save
这会在我们的项目中安装 stron，并将其保存到 package.json 的依赖中。
使用 stron
使用 stron 很简单。我们只需要在 HTML 文件中引入 stron，并通过 data-stron 属性来指定要放大的图片即可。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ------------
----- ---------------- ------------------------------------
-------
------
---- ----------------- --------- -----------
------- -----------------------------------------------
--------
--- ----------------
---------
-------
-------在上面的示例中，我们首先通过 link 标签引入 stron 的样式文件 stron.css，接着，在要放大的图片上设置了 data-stron 属性，并在最后通过 script 标签引入 stron 并创建一个实例。构造函数的参数为我们的图片选择器。
这里需要注意的是，我们初始化 stron 实例时，要将选择器传递给 Stron 构造函数，并加上点号（.），用以指定选择器类型为类选择器。
自定义 stron 的配置项
stron 提供了许多配置项，可以帮助我们对于弹出的放大图片进行自定义。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ------------
----- ---------------- ------------------------------------
-------
------
---- ----------------- --------- ---------- ---------------- ----------------------------
------- -----------------------------------------------
--------
--- --------------- -
------ -----
--------- ----
---
---------
-------
-------在上面的 HTML 代码中，我们通过在放大的图片上设置 data-width 和 data-hide-scrollbars 属性，来设置弹出图片的宽度和是否隐藏滚动条。同时，在创建 Stron 实例时，我们传递了一个配置对象，用以设置更多的配置项，比如 keyboard。这个配置项用来启用或禁用按键操作。
总结
通过阅读本文，我们了解了 npm 包 stron 的基本使用方法和自定义配置方法。stron 使用简单，功能强大，可以帮助我们更方便地实现图片的放大缩小效果。使用 stron 不仅可以提高我们的工作效率，也可以帮助我们提升项目的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731781e8991b448e94e4