如何放大圖像如下？

Question

我想通過單擊鼠標來放大圖像，這樣除了可以在鼠標光標下方放大點擊的位置（很像Google地圖縮放）。我知道如何在CSS3中做到這一點，但我想用JavaScript來做到這一點。

Answer 1

如果你可以在CSS3中做到這一點，你可以使用jquery的.css()函數來實現相同的效果。

見http://api.jquery.com/css/

Answer 2

你應該這樣做與動畫（），並設置左/頂部位置和寬度值。

下面是我寫的概念證明演示：http://jsfiddle.net/7PzGQ/

的jQuery：

$('.imageHolder img').bind('click', function(e) { 

    var _this = $(this), 
     scale = 3; 

    // Store default width 
    if(_this.data('defWidth') == undefined) { 
     _this.data('defWidth', _this.width()); 
    } 

    if (_this.width() > _this.data('defWidth')) { 

     // Reset image 
     _this.animate({ 
      'left': 0, 
      'top': 0, 
      'width': _this.data('defWidth') 
     }); 

    } else { 
     // Localise clicked position 
     var imgHitX = e.pageX - _this.offset().left, 
      imgHitY = e.pageY - _this.offset().top; 

     // Calculate position offset 
     var left = ((imgHitX * scale) - imgHitX) * -1, 
      top = ((imgHitY * scale) - imgHitY) * -1; 

     // Scale image 
     _this.animate({ 
      'left': left, 
      'top': top, 
      'width': _this.width() * scale 
     }); 
    } 

}); 

HTML：

<div class="imageHolder"> 
    <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" /> 
</div> 

CSS：

body { 
    background: #000; 
} 
.imageHolder { 
    position:relative; 
    margin: 50px; 
} 
.imageHolder img { 
    position:absolute; 
    left:0px; 
    top:0px; 
}