hammer.js插件h5移动端手指拖拽缩放效果实践方法

由于要做一个在移动端触控元素的效果,需要去网上找一些插件,经过一番百度,涉及到touch的插件并不多,主要有hammer.js和panzoom.js两个插件。panzoom简单易用,直接绑定某个元素初始化就行了,但是后来发现,panzoom.js在安卓微信端上有兼容性问题,自己改插件的话很难,真是狗血了。

所以就换成了hammer.js,如果按照hammer官方api直接来写的话,会让人摸不着头脑,官方给出的方法并不像panzoom那样直接绑定元素块,而是绑定一个区域,然后给出一些扩展方法,具体方法里面怎么写,就要读者自己去脑洞大开了。

在网上有关这方面的资料很少,经过查找,还是找到了一些和自己想要效果类似的方法。经过一番修改,总算达到预期的效果,话不多说,先看一下效果图:

 

 

可以看到,手指移动元素和双指缩放都没问题,No problem ~~

如果想到更多的触控效果,可以参考官方api自己去扩展。

 源码地址:http://www.jiandanji.fun/blog/news-2.html

转载于:https://www.cnblogs.com/haoji/p/11207289.html

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值