如何实现手机淘宝商品图片的手指缩放功能?
如图,点击商品图片后会出现一个黑色的弹出层,在这个弹出层内可以缩放(pinch)图片。
网页添加了<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
,所以系统级的缩放是被禁止了的。
我猜想应该可以用hammer.js
中的pinch
事件模拟,每次pinch
改变图片的长宽,但初步实验下发现有些复杂。
例如,我的网页中是不加载原图的,所以点击这个弹出层后,要额外加载原图,还需监听原图的onload
事件,然后才允许pinch
。当然,也可以直接加载原图,这样会省事很多,淘宝就是这么做的。
而且pinch
事件的触发条件调试起来也比较麻烦。
所以,最直接的方案是有类似的jQuery
插件,但我搜索了一会儿,没发现。不知道大家是否知道能实现这样功能的插件?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
百度有个touch.js,支持各种手势,包括缩放pinch事件,pinchin是缩小,pinchout是放大。
photoswiper 刚好也需要用这种效果 找了下 http://photoswipe.com/
用photoswipe