适用于Android和iPad的jQuery mobile/JavaScript图像捏缩放

Wha*_*ame 4 html5 multi-touch touch css3 jquery-mobile

我一直在寻找一个简单的解决方案,如何在不影响网站其他部分的情况下放大和缩小图像(png),但没有找到.

有没有人使用这样的工具或知道使用jQuery或javascript的方法?我是jQuery的新手,所以不知道我应该看看哪些事件.此功能应适用于Android平板电脑和iPad.

看看JQuery Mobile Pinch Zoom Image Only和提供的链接,但显然是那些使用PhoneGap的链接.

谢谢你的帮助.

小智 6

我没有找到解决方案,所以我自己实现了(使用vanilla JS和canvas但可移植到css3):https://github.com/rombdn/img-touch-canvas

示例:http://www.rombdn.com/img-touch-canvas/demo(更好的是使用触摸设备,但在桌面上使用+/-和鼠标拖动)

<html>
<body>
    <div style="width: your_image_width; height: your_image_height">
        <canvas id="mycanvas" style="width: 100%; height: 100%"></canvas>
    </div>

    <script src="img-touch-canvas.js"></script>
    <script>
        var gesturableImg = new ImgTouchCanvas({
            canvas: document.getElementById('mycanvas'),
            path: "your image url"
        });
    </script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)