控制圖檔移動和縮放的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略微有點延遲，如果要求不是超級高，可以使用。