JavaScript圖像縮放與CSS3變換，如何計算原點？ （附例）

Question

我正在嘗試實現圖像縮放效果，有點像縮放如何使用谷歌地圖，但有一個固定位置圖像的網格。

我上傳了迄今為止我所擁有的一個例子：

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

（使用CSS3轉換，因此僅適用於Firefox，Opera，Chrome或Safari）

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

我使用CSS3轉換使縮放位工作：

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

...但是，我依靠外部div上的鼠標X / Y位置來放大鼠標光標所在的位置，類似於Google Maps的功能。 問題是，如果您直接放大圖像，將光標移動到左下角並再次縮放，而不是縮放到圖像的左下角，它會縮放到整個馬賽克的底部/左側。 當你在移動鼠標時稍微放大一點，即使是輕微的，也會產生跳躍在馬賽克周圍的效果。

這基本上就是問題，我希望縮放的工作方式與谷歌地圖完全一樣，它可以縮放到鼠標光標位置的位置，但是我不能理解數學來計算變換原點：正確的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