放大/縮小容器中心的可拖動圖像

使用腳本製作照片查看器，用戶可以拖動圖像並放大圖像以保持中心位置。我正在使用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/

幫助我。提前致謝。

來源

2012-12-06 user1719367

您需要抓住當前的左/頂位置並根據該位置更改位置。從我可以告訴你總是從0開始：

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

來源

2012-12-06 18:58:49 Syon

是的我知道這一點。但我並不是想找到辦法去做。我試圖做的是 - 'var setLeft = image.position（）。left - （ASPECT_W * zoom_value/2）;' 'var setTop = image.position（）。top - （ASPECT_H * zoom_value/2）;' 我知道這是不正確的。你能否建議我這樣做的正確方法。 – user1719367

放大/縮小容器中心的可拖動圖像

回答

相關問題