如何使用jquery縮放div內容？

我有一個家長<div>。在裏面我放置了一些文字和圖片。現在我需要放大該父母的特定部分<div>。可能嗎？如何使用jquery縮放div內容？

2012-12-18 KarSho

可否請您提供jsfiddle鏈接。 – karthik

related/duplicate：[JavaScript Zoom whole Div]（http://stackoverflow.com/questions/7064632/javascript-zoom-whole-div）， [如何縮放整個div？]（http：// stackoverflow。 com/questions/5222198/how-to-zoom-an-entire-div） –

看到這個小提琴http://jsfiddle.net/D7cn8/ – Anshu

如果你想要的圖像鼠標懸停可放大：

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

來源

2012-12-18 11:03:35 Gadde

問題是關於一個div，而不是一個圖像的權利？這不會工作 – Pablo

@Pablo它的作品，如果你付出一點努力，並適應你的情況。 – Kennyomar

@Pablo如果你想要一個div，你可以修改代碼，並嘗試以上代碼工作是放大div中的圖像 – Gadde

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

來源

2012-12-18 11:07:52

@ 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'); 
      }) 
    });

來源

2013-11-16 22:53:06 ter24

used zoom-master/jquery.zoom.js。圖像的縮放功能非常完美。這是一個到頁面的鏈接。 http://www.jacklmoore.com/zoom/

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

    }); 
</script>

來源

2016-05-02 03:35:29

如何使用jquery縮放div內容？

回答

相關問題