缩放图像保持中心与Jquery修复

我有一个脚本，将调整与jquery滑块图像。图像位于溢出的隐藏包容器内。但是在缩小或放大时保持图像修复中心的问题。我知道在放大时可以通过减去左侧和顶部的值来完成。但无法找到一种方法来做到这一点。你可以查看我的脚本 -缩放图像保持中心与Jquery修复

var globalElement_width; 
var globalElement_height; 
$(document).ready(function(){ 
    $img=$('.canvas img'); 
    globalElement_width=$img.width(); 
    globalElement_height=$img.height(); 

    $(".slider").slider({ 
     step: 1, 
     min: 0, 
     max: 100, 
     value: 0, 
     slide: function(event, ui) 
     { 
     resize_img(ui.value); 
     } 
    }); 

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

}); 
function resize_img(val) 
{ 
    var width=globalElement_width; 
    var zoom_percen=width * 0.5; // Maximum zoom 50% 
    var ASPECT = zoom_percen/50; 
    var zoom_value = val/2; 
    var size= width + ASPECT * zoom_value; 

    $img = $('.canvas img'); 
    $img.stop(true).animate({ 
     width: size 
    }, 250); 
}

Jsfiddle-

http://jsfiddle.net/hirenbg89/Qv35B/5/

任何帮助吗？提前致谢。

来源

2012-12-05 user1719367

您可以尝试通过移值的一半改变margin-top和margin-left：

var d = ASPECT*zoom_value/2; 
$img.stop(true).animate({ 
    marginTop: -d, 
    marginLeft: -d, 
    width: size 
}, 250);

http://jsfiddle.net/dfsq/Qv35B/6/

来源

2012-12-05 20:00:15 dfsq

它与修复中心工作的伟大。但是，我们可以使用left和top值来做到这一点，因为我必须在可拖动元素中添加一个包含。为此，我需要动态更改最高的正确值。再次感谢。 – user1719367

只需将'marginTop'改为'top'和'marginLeft'为'left'即可。 – dfsq

是的，那也可以。但是，如果我在将其拖动到其他任何位置后尝试调整大小，它将跳转到错误的位置。我想在不使用保证金的情况下在框中的任何位置调整它的大小。你能否给我提供任何建议。 – user1719367

缩放图像保持中心与Jquery修复

回答

相关问题