使用JQUERY在中心縮小圖像？

Question

我想讓圖像動畫並將其精確地保存在當前打開的窗口的中央。 我已經嘗試了以下，但它不工作，請建議如何改進代碼以使其工作。

// get image dimensions 
    var h = $(this).height(); 
    var w = $(this).width(); 

    //get div dimensions 
    var div_h =$('#imgContainer').height(); 
    var div_w =$('#imgContainer').width(); 

    var pY = Math.round((div_h - h)/2) + 'px'; 
    var pX = Math.round((div_w - w)/2) + 'px'; 

    $(this).animate({ 
     opacity:"1", 
     top: pY+"px", 
     left: pX+"px", 
     zoom: '500%' 
    }, 'medium') 

Answer 1

它確實取決於您的標記的其餘部分。 您的代碼工作對我來說是這樣的：

（check the demo）

HTML：

<div id="imgContainer"> 
<img src="your-image.jpg"> 
</div>​ 

CSS：

html, body, #imgContainer { 
    width:100%; height:100%; 
} 
#imgContainer > img { 
    position:absolute; top:0; right:0; bottom:0; left:0; 
    margin:auto; 
    width:200px; 
    max-width:100%; 
    max-height:100%; 
} 

的jQuery：

$('#imgContainer > img').on('click',function(){ 
    var h = $(this).height(); 
    var w = $(this).width(); 

    //get div dimensions 
    var div_h =$('#imgContainer').height(); 
    var div_w =$('#imgContainer').width(); 

    var pY = Math.round((div_h - h)/2) + 'px'; 
    var pX = Math.round((div_w - w)/2) + 'px'; 

    $(this).animate({ 
     opacity:"1", 
     zoom: '500%' 
    }, 1000) 

}); 

Answer 2

您可以使用jQuery zoom plugin。以下是使用示例：

// Example: 
$(document).ready(function(){ 
    $('a.photo').zoom({url: 'photo-big.jpg'}); 
}); 

// Using ColorBox with Zoom 
$(document).ready(function(){ 
    $('a.photo').zoom({ 
     url: 'photo-big.jpg', 
     callback: function(){ 
      $(this).colorbox({href: this.src}); 
     } 
    }); 
});