控制图片移动和缩放的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略微有点延迟,如果要求不是超级高,可以使用。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值