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

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

完整演示链接-

---

帮帮我。提前感谢。

您需要抓住当前的左/顶位置，并在此基础上更改位置。据我所知，您总是从0开始：

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

---

您需要抓住当前的左/顶位置，并在此基础上更改位置。据我所知，您总是从0开始：

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

---

是的，我知道。但我不想找到一个方法来做这件事。我想做的是-

var setLeft=image.position（）.left-（ASPECT\W*zoom\u value/2）
var setTop=image.position（）.top-（纵横比*缩放值/2）我知道它不正确。你能给我建议正确的方法吗？是的，我知道。但我不想找到一个方法来做这件事。我想做的是-
var setLeft=image.position（）.left-（ASPECT\W*zoom\u value/2）
var setTop=image.position（）.top-（纵横比*缩放值/2）我知道它不正确。你能给我建议正确的方法吗。