简介
@mmierzynski/image-zoom 是一款轻量级的图片缩放工具，通过鼠标滚轮或者手势缩放图片，在前端页面使用场景广泛。此处介绍了该 npm 包的使用教程，可以帮助开发者快速上手。
安装
npm 安装
npm install @mmierzynski/image-zoom
yarn 安装
yarn add @mmierzynski/image-zoom
使用
引入
在需要使用的页面文件中引入 image-zoom：
import ImageZoom from '@mmierzynski/image-zoom';
或
<script src="node_modules/@mmierzynski/image-zoom/dist/index.js"></script>
HTML 文件
在 HTML 文件中放入图片，比如：
<img src="https://cdn.pixabay.com/photo/2019/12/21/01/03/sunset-4719277_1280.jpg" alt="sunset" id="zoom">
JavaScript 文件
在 JavaScript 文件中实例化 ImageZoom 类，并将其应用于图片：
const zoomElement = document.getElementById("zoom");
const zoom = new ImageZoom(zoomElement);参数
ImageZoom 类有多个构造函数参数，其中默认参数如下：
const zoom = new ImageZoom(zoomElement, {
maxZoom: 4, // 放大倍数最大值
minZoom: 0.5, // 缩小倍数最小值
step: 0.1, // 每次缩放的步长
showWheelIndicator: true // 是否显示缩放指示器
});效果
打开浏览器预览页面，鼠标放到图片上面时，如图：
方法
ImageZoom 类有多个公共方法，其中通过 zoomIn和 zoomOut 方法实现图片的放大和缩小。
zoom.zoomIn(); // 图片放大 zoom.zoomOut(); // 图片缩小
事件
ImageZoom 类具有以下事件，可根据需求注册。
const zoomElement = document.getElementById("zoom");
const zoom = new ImageZoom(zoomElement, {
onZoomStart: () => {}, // 缩放开始时触发事件
onZoomEnd: () => {}, // 缩放结束时触发事件
onZoom: () => {}, // 缩放时触发事件
onDoubleClick: () => {} // 双击图片时触发事件
});示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------------------------------
----- ---------------- ----------------------------------------------------------------
-------
----- -
------ ------
------- --------
-
--------
-------
------
---- ---------------------------------------------------------------------------- ------------ ----------
------- -----------------------------------------------------------------------
--------
----- ----------- - --------------------------------
----- ---- - --- -----------------------
---------
-------
-------总结
@mmierzynski/image-zoom 是一款方便易用的图片缩放工具，可以满足页面上图片缩放的需求。希望本篇文章能够给初学者带来一些启发。如果您有任何问题或反馈，请联系作者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5551ab1864dac66adb