如何实现手机淘宝商品图片的手指缩放功能?


示例

如图,点击商品图片后会出现一个黑色的弹出层,在这个弹出层内可以缩放(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 插件,但我搜索了一会儿,没发现。不知道大家是否知道能实现这样功能的插件?

jquery jquery插件 JavaScript

芙兰朵露。 9 years, 5 months ago

Your Answer