如何使用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 - 你的回答非常有幫助。 謝謝！ 我需要一個“地圖”式的縮放比例，並能夠產生我的帖子所需的感覺。 我的標准包括需要點擊重復，並在每次點擊時繼續縮小/縮小。 以下是我的最終結果。

    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);

Answer 4

使用了zoom-master / jquery.zoom.js。 圖像的縮放效果非常好。 這是該頁面的鏈接。 http://www.jacklmoore.com/zoom/

 <script>
    $(document).ready(function(){
        $('#ex1').zoom();

    });
</script>