javascript - 居中可拖动的增长 div

Question

我有一个可以拖动和缩放的 div。它可能比窗口大也可能不比窗口大，我正在尝试编写一个函数，当 div 的宽度或高度发生变化时（通过缩放函数），它将保持它以相对于窗口的当前中心为中心。为此，我需要将其顶部和左侧（或它的边距，但更喜欢顶部和左侧位置）更改为与其当前顶部和左侧位置相关的数字。我只是无法理解函数的逻辑，它将使其保持在当前位置的中心。要完全居中，我只需将其顶部和左侧更改为 div 大小的 (-) 一半，但要使其围绕当前中心居中，我该怎么办！

Answer 1

根据您增加 div 宽度/高度大小的方式，您只需更改 div 的边距以反映大小变化的一小部分。您还可以考虑以类似方式更改左/上绝对值。

例如，使用 jQuery 动画：

$("#draggable").animate({
    height: '+=60',
    width: '+=60',
    marginLeft: '-=30',
    marginTop: '-=30'
},1000);

例子：

http://jsbin.com/ikabih/2/edit

Answer 2

在朋友的帮助下得到它。。

function changeZoom(amount)
{   
    var oldWidth = $('#zoom').width(), oldHeight = $('#zoom').height();
    if(oldWidth == amount){return false}
    var xPercent = (($('#viewer').width() / 2) + Math.abs($('#zoom').position().left)) / oldWidth,
    yPercent = (($('#viewer').height() / 2) + Math.abs($('#zoom').position().top)) / oldHeight;

    var newLeft = (amount * xPercent) - ($('#viewer').width() / 2),
    newTop = (amount * yPercent) - ($('#viewer').height() / 2);

    newLeft = 0 - newLeft;
    newTop = 0 - newTop;

}