放大和缩小一个div

Question

我想在我的jQuery站点选项中实现放大和缩小。这个站点使用了很多jQueryUI Draggable个元素（就像其中一个一样）并且一切正常，直到我尝试在其中添加缩放选项。我试过的唯一方法是使用-webkit-transform: scale(0.5)，这完全破坏了我所有的拖拽。手柄有错误的剪辑盒，几乎无法使用。此外，整个页面被这个transform事物弄乱了。

当我使用内置Ctrl + + / -选项的浏览器时，效果会更好。它的工作原理就像我希望它工作但可拖动区域不是这个网站上唯一的东西。我所在地区的用户界面越来越小，也越来越大。

我正在寻找放大和缩小 one div 的解决方案。我只使用jQuery（因为我的网站结构限制），所以我不打算给它添加任何画布区域。

如果需要更多信息，请询问。我试着提到每一个重要的细节。

编辑：这是一个截图，供您了解我的网页结构：

网站上的所有用户界面元素均为fixed，可拖动的中心区域为absolute。

Answer 1

如果您希望在鼠标悬停时缩放该图像：

$（document）.ready（function（）{ $（'＃div img'）。悬停（

function() {
    $(this).animate({ 'zoom': 1.2 }, 400);
},
function() {
    $(this).animate({ 'zoom': 1 }, 400);
});

}）;

或者如果使用放大和缩小按钮，您可以这样做：

$（ “＃ZoomIn”）点击（ZoomIn（））;

$（ “＃缩小（ZoomOut）”）上单击（缩小（ZoomOut）（））;

function ZoomIn（event）{

$("#div img").width(
    $("#div img").width() * 1.2
);

$("#div img").height(
    $("#div img").height() * 1.2
);

}，

function ZoomOut（event）{

$("#div img").width(
    $("#imgDtls").width() * 0.5
);

$("#div img").height(
    $("#div img").height() * 0.5
);

}

Answer 2

尝试使用http://jaukia.github.io/zoomooz/

<强> JS： -

$(document).ready(function() {
    $("#element").click(function(evt) {
        $(this).zoomTo({targetsize:0.75, duration:600});
        evt.stopPropagation();
    });
});