如何使用jquery缩放div内容？

Question

我有一个家长<div>。我在里面放了一些文本和图片。现在，我需要缩放到父<div>的特定部分。有可能吗？

Answer 1

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

$(document).ready( function() {
$('#div img').hover(
    function() {
        $(this).animate({ 'zoom': 1.2 }, 400);
    },
    function() {
        $(this).animate({ 'zoom': 1 }, 400);
    });
});

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

$("#ZoomIn").click(ZoomIn());

$("#ZoomOut").click(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

@Gadde -你的回答非常有帮助。谢谢!我需要一个“地图”的-like缩放的div，并能够产生我需要的感觉与您的帖子。我的标准包括需要重复单击，并在每次单击时继续缩小/放大。下面是我的最终结果。

    var currentZoom = 1.0;

    $(document).ready(function () {
        $('#btn_ZoomIn').click(
            function () {
                $('#divName').animate({ 'zoom': currentZoom += .1 }, 'slow');
            })
        $('#btn_ZoomOut').click(
            function () {
                $('#divName').animate({ 'zoom': currentZoom -= .1 }, 'slow');
            })
        $('#btn_ZoomReset').click(
            function () {
                currentZoom = 1.0
                $('#divName').animate({ 'zoom': 1 }, 'slow');
            })
    });

Answer 3

 $('image').animate({ 'zoom': 1}, 400);