控制图片移动和缩放的js插件 drag.js和zoom.js

web应用中，时常会遇到要对图片进行放大缩小和移动的操作，这里介绍两款很轻量的js插件。

一、插件获取：

点击获取zoom.js缩放插件

提取码：m4nm

点击获取drag.js拖动插件

提取码：roj3

二、使用方法

此两个插件依赖jquery，自行引入即可

1. 在img标签的外层添加div

<div id="imgId">
	<image href="your imgUrl"></image>
</div>
           

1. 初始化插件

// 拖动插件初始化
let drag = $solway.drag({
    ele: document.getElementById('imgId')
});

// 缩放插件初始化
let zoom = $solway.zoom({
    ele: document.getElementById('imgId'),
    scale: 1,
    minScale: 0.1,
    translate: [0, 0]
});
           

1. 插件的销毁方法

drag.destroy();
zoom.destroy();
           

三、效果预览

Tips:

缩放插件zoom.js使用比较顺滑。

拖动插件drag.js略微有点延迟，如果要求不是超级高，可以使用。