居中可拖动的增长 div答案

【问题标题】：center a draggable growing div居中可拖动的增长 div
【发布时间】：2012-07-03 08:13:25
【问题描述】：

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

【问题讨论】：

您只是在寻找用于使某物居中的数学？ left = (screen width / 2) - (div width / 2), top = (screen height / 2) - (div height / 2) 如果这不是您想要的，请尝试在您的问题中澄清。
您好，感谢您的意见，我会尝试更好地解释我的需求。如果 div 大于屏幕并拖动到特定区域（使其一部分位于屏幕中心）然后缩放更大，我希望将其当前焦点保持在中心。我需要考虑它的偏移量。它是针对地图的，用户将地图移动到特定位置，然后放大该位置。

标签： javascript jquery draggable centering

【解决方案1】：

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

例如，使用 jQuery 动画：

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

示例：

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

【讨论】：

【解决方案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;

}

【讨论】：