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 回答