javascript - 如何使用 jquery 缩放 div 内容？

Question

我有一个 parent <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
    );
}