简介
@mmierzynski/image-zoom 是一款轻量级的图片缩放工具，通过鼠标滚轮或者手势缩放图片，在前端页面使用场景广泛。此处介绍了该 npm 包的使用教程，可以帮助开发者快速上手。
安装
npm 安装
--- ------- -----------------------
yarn 安装
---- --- -----------------------
使用
引入
在需要使用的页面文件中引入 image-zoom：
------ --------- ---- --------------------------
或
------- ------------------------------------------------------------------
HTML 文件
在 HTML 文件中放入图片，比如：
---- ---------------------------------------------------------------------------- ------------ ----------
JavaScript 文件
在 JavaScript 文件中实例化 ImageZoom 类，并将其应用于图片：
----- ----------- - -------------------------------- ----- ---- - --- -----------------------
参数
ImageZoom 类有多个构造函数参数，其中默认参数如下：
----- ---- - --- ---------------------- - -------- -- -- ------- -------- ---- -- ------- ----- ---- -- ------- ------------------- ---- -- --------- ---
效果
打开浏览器预览页面，鼠标放到图片上面时，如图：
方法
ImageZoom 类有多个公共方法，其中通过 zoomIn和 zoomOut 方法实现图片的放大和缩小。
-------------- -- ---- --------------- -- ----
事件
ImageZoom 类具有以下事件，可根据需求注册。
----- ----------- - -------------------------------- ----- ---- - --- ---------------------- - ------------ -- -- --- -- --------- ---------- -- -- --- -- --------- ------- -- -- --- -- ------- -------------- -- -- -- -- --------- ---
示例代码
--------- -----
----- ----------
------
----- ----------------
----------------------------------------------
----- ---------------- ----------------------------------------------------------------
-------
----- -
------ ------
------- --------
-
--------
-------
------
---- ---------------------------------------------------------------------------- ------------ ----------
------- -----------------------------------------------------------------------
--------
----- ----------- - --------------------------------
----- ---- - --- -----------------------
---------
-------
-------总结
@mmierzynski/image-zoom 是一款方便易用的图片缩放工具，可以满足页面上图片缩放的需求。希望本篇文章能够给初学者带来一些启发。如果您有任何问题或反馈，请联系作者。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5551ab1864dac66adb