如何实现手机淘宝商品图片的手指缩放功能?
如图,点击商品图片后会出现一个黑色的弹出层,在这个弹出层内可以缩放(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
插件,但我搜索了一会儿,没发现。不知道大家是否知道能实现这样功能的插件?
芙兰朵露。
9 years, 5 months ago