如何使用jquery缩放div内容？ [英] How to zoom div content using jquery?

问题描述

我有一个父母< div> 。在里面我放置了一些文字和图片。现在我需要放大该父<< div> 的特定部分。是否有可能？

I have a parent <div>. Inside that I place some text and images. Now I need to zoom to a particular portion of that parent <div>. Is it possible?

推荐答案

如果您希望图片在鼠标悬停时放大：

If you want that image to be zoomed on mouse hover :

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

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

​or you may do like this if zoom in and out buttons are used :

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

这篇关于如何使用jquery缩放div内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！