4

我一直在寻找一个简单的解决方案来解决如何在不影响网站其余部分的情况下放大和缩小图像（png），但没有找到。

你们有没有人使用过这样的工具或知道使用 jQuery 或 javascript 的方法？我对 jQuery 很陌生，所以不知道我应该看什么事件。此功能应适用于 Android 平板电脑和 iPad。

只查看了JQuery Mobile Pinch Zoom Image和提供的链接，但显然这些链接是针对使用 PhoneGap 的。

谢谢你的帮助。

4

2 回答 2

7

我也没有找到解决方案，所以我自己实现了它（使用香草 JS 和画布但可移植到 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>
于 2013-07-19T08:18:15.327 回答
0

I would place the image in a "viewport" layer that is used to maintain the flow of your page. The "viewport" element would have it's overflow CSS property set to hidden to achieve this goal.

You can then use JavaScript to detect multiple touches and then scale the image as necessary. I have yet to use this frameworks but it seems very cool and could help make this easier on you: https://github.com/HotStudio/touchy

You can also detect multiple touches without a framework by watching the event.touches array inside an event handler for touchmove. For each touch occurring simultaneously there will be another index in the event.touches array.

Using Touchy seems pretty easy (untested):

var handleTouchyPinch = function (e, $target, data) {
    $target.css({'webkitTransform':'scale(' + data.scale + ',' + data.scale + ')'});
};
$('#my_div').bind('touchy-pinch', handleTouchyPinch);
于 2012-10-10T19:15:50.210 回答