Question

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

Answer 1

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

例如，使用jQuery animate：

$("#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;

}

以一个可拖延的成长中心为中心

2 个答案: