web应用中,时常会遇到要对图片进行放大缩小和移动的操作,这里介绍两款很轻量的js插件。
一、插件获取:
点击获取zoom.js缩放插件
提取码:m4nm
点击获取drag.js拖动插件
提取码:roj3
二、使用方法
此两个插件依赖jquery,自行引入即可
- 在img标签的外层添加div
<div id="imgId">
<image href="your imgUrl"></image>
</div>
- 初始化插件
// 拖动插件初始化
let drag = $solway.drag({
ele: document.getElementById('imgId')
});
// 缩放插件初始化
let zoom = $solway.zoom({
ele: document.getElementById('imgId'),
scale: 1,
minScale: 0.1,
translate: [0, 0]
});
- 插件的销毁方法
drag.destroy();
zoom.destroy();
三、效果预览
Tips:
缩放插件zoom.js使用比较顺滑。
拖动插件drag.js略微有点延迟,如果要求不是超级高,可以使用。