1

スクリプトを作成して、ユーザーが画像をドラッグして中心を固定したままズームできるフォト ビューアーを作成します。画像のズームインとズームアウトに jquery スライダーを使用しています。基本的に、コンテナの中心で画像をズームする必要があります。しかし、ドラッグした後にズームしようとすると、ジャンプし続けます。ここで私のコードの一部を表示できます-

function resize_img(val)
{
    var maxZoom =50; //50% zoom

    var width=globalElement_width; //original image width
    var height=globalElement_height; //original image height
    var zoom = maxZoom / 100;
    var zoom_percen_w = width * zoom;
    var zoom_percen_h = height * zoom;
    var ASPECT_W = zoom_percen_w / maxZoom;
    var ASPECT_H = zoom_percen_h / maxZoom;
    var zoom_value = val * zoom;
    var setWidth = width + ASPECT_W * zoom_value;
    var setHeight = height + ASPECT_H * zoom_value;

    $img = $('.canvas img');

    var setLeft = 0 -(ASPECT_W * zoom_value/2);
    var setTop = 0 - (ASPECT_H * zoom_value/2);

    $img.css('width',setWidth+'px');
    $img.css('height',setHeight+'px');
    $img.css('left',setLeft+'px');
    $img.css('top',setTop+'px');
    ....................

完全なデモ リンク - http://jsfiddle.net/hirenbg89/Qv35B/13/

助けて。前もって感謝します。

4

1 に答える 1

1

現在の左上/上位置を取得し、それに基づいて位置を変更する必要があります。私が言えることから、あなたは常に0から始めています：

var setLeft = 0 -(ASPECT_W * zoom_value/2);
var setTop = 0 - (ASPECT_H * zoom_value/2);
于 2012-12-06T18:58:49.970 に答える