search

Home  >  Q&A  >  body text

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

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

PHP中文网PHP中文网2819 days ago169

reply all(3)I'll reply

  • 迷茫

    迷茫2017-04-10 16:56:37

    百度有个touch.js,支持各种手势,包括缩放pinch事件,pinchin是缩小,pinchout是放大。

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 16:56:37

    photoswiper 刚好也需要用这种效果 找了下 http://photoswipe.com/

    reply
    0
  • 迷茫

    迷茫2017-04-10 16:56:37

    用photoswipe

    reply
    0
  • Cancelreply