Question

使用脚本制作照片查看器，用户可以在其中拖动图像并可以缩放它以保持中心固定。我正在使用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/

帮帮我。提前谢谢。

Answer 1

您需要抓住当前左/上位置并根据该位置更改定位。据我所知，你总是从0开始：

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

放大/缩小容器中心的可拖动图像

1 个答案: