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

发布于 2022-09-02 01:02:08 字数 668 浏览 4 评论 0

示例

如图,点击商品图片后会出现一个黑色的弹出层,在这个弹出层内可以缩放(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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

謸气贵蔟 2022-09-09 01:02:08

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

戏蝶舞 2022-09-09 01:02:08

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

我早已燃尽 2022-09-09 01:02:08

用photoswipe

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文