4

Web サイトの他の部分に影響を与えずに画像 (png) をズームインおよびズームアウトする簡単な方法を探していましたが、何も見つかりませんでした。

そのようなツールを使用したり、jQuery や JavaScript を使用してこれを行う方法を知っている人はいますか? 私は jQuery を初めて使用するので、どのイベントを見ればよいかわかりません。この機能は、Android タブレットと iPad の両方で動作するはずです。

JQuery Mobile Pinch Zoom Image Onlyと提供されたリンクを見ましたが、明らかにそれらは 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

ページの流れを維持するために使用される「ビューポート」レイヤーに画像を配置します。この目標を達成するには、「ビューポート」要素のoverflowCSS プロパティを に設定します。hidden

その後、JavaScript を使用して複数のタッチを検出し、必要に応じて画像をスケーリングできます。私はまだこのフレームワークを使用していませんが、非常にクールで、これを簡単にするのに役立つかもしれません: https://github.com/HotStudio/touchy

event.touchesのイベント ハンドラー内の配列を監視することで、フレームワークなしで複数のタッチを検出することもできますtouchmove。同時に発生する各タッチに対して、event.touches配列内に別のインデックスがあります。

使用Touchyはかなり簡単に思えます (テストされていません):

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 に答える