使用CSS3轉換JavaScript圖像縮放，如何計算原點？ （舉例）

Question

我試圖實現圖像縮放效果，有點像縮放如何與谷歌地圖工作，但與網格的固定位置圖像。

我上傳的是我至今這裏一個例子：

http://www.dominicpettifer.co.uk/Files/MosaicZoom.html

（使用CSS3轉換所以只適用於Firefox，歌劇，Chrome或Safari）

使用鼠標輪放大/縮小。 HTML源代碼基本上是一個帶有inner-div的外部div，inner-div包含了使用絕對位置排列的16個圖像。這將基本上是一個照片馬賽克。

我已經得到了變焦位使用CSS3轉換工作：

$(this).find('div').css('-moz-transform', 'scale(' + scale + ')'); 

...但是，我依靠鼠標X/Y在外DIV位置來放大在鼠標光標與Google地圖的功能類似。問題是，如果你放大圖像，將光標移動到左下角並再次縮放，而不是放大到圖像的底部/左上角，它會放大到整個馬賽克的底部/左側。當您在移動鼠標的同時放大距離，甚至略微放大時，這種效果會出現跳躍效果。

這基本上是問題所在，我希望縮放像谷歌地圖那樣工作，它完全放大鼠標光標位置，但我無法繞過數學計算轉換原點：X/Y值正確。請幫忙，現在已經停留了3天。

以下是完整的代碼清單鼠標滾輪事件：

var scale = 1; 

$("#mosaicContainer").mousewheel(function(e, delta) 
{ 
    if (delta > 0) 
    { 
     scale += 1; 
    } 
    else 
    { 
     scale -= 1; 
    } 
    scale = scale < 1 ? 1 : (scale > 40 ? 40 : scale); 

    var x = e.pageX - $(this).offset().left; 
    var y = e.pageY - $(this).offset().top; 

    $(this).find('div').css('-moz-transform', 'scale(' + scale + ')') 
     .css('-moz-transform-origin', x + 'px ' + y + 'px'); 

    return false; 
}); 

Answer 1

終於想通了，看看這裏：

http://www.dominicpettifer.co.uk/Files/Mosaic/MosaicTest.html

使用鼠標滾輪進行縮放，你也可以拖動圖像，只適用於最新的Safari，Opera和Firefox（由於某些原因，圖像在Chrome上很模糊）。在某些地區也有點兒車。 DocType有很多人的幫助http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example