Javascript 使用JQUERY缩小中心图像？

我想设置图像的动画，并将其精确地保持在当前打开的窗口的中心。 我已经尝试了以下内容，但它不起作用。请建议如何改进代码以使其起作用

   // 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')

你可以用。以下是使用示例：

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

---

这实际上取决于标记的其余部分。 您的代码对我的工作方式如下：

（）

HTML:

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)

});

---

您的解决方案在firefox中不起作用。。使用Firefox20.*。。看起来firefox不支持缩放属性。缩放回原始大小如何？“那真是太棒了！”乔娜说得对！非常感谢你。我也喜欢你用过的图片哈哈。我假设我需要使用比缩略图更高分辨率的图像，以便在大小增加500%时不会降低质量。是的@JustJohn，o也许只需更改img onclick的src属性……这取决于你需要这个脚本做什么！

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%;
}

$('#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)

});