JavaScript 图片缩放与 CSS3 变换，如何计算原点？（附例）

Question

我正在尝试实现一种图像缩放效果，类似于Google Maps的缩放效果，但是应用在一组固定位置的图像网格上。

我已经上传了一个示例，你可以在这里查看：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的功能。问题是，如果您对图像进行缩小，并将光标移动到底部/左侧角并再次缩小，则会将其缩小到整个马赛克的底部/左侧，而不是图像的底部/左侧角。这会导致在缩放时出现马赛克跳动的效果。

这基本上就是问题所在，我希望缩放能像Google Maps一样完美地按照鼠标光标位置进行缩放，但我无法理解如何正确计算转换原点：X/Y值的数学公式。请帮帮我，我已经被卡住了三天。

以下是鼠标滚轮事件的完整代码清单:

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

- Sunday Ironfoot

---

是的，你说得对，只是我不擅长数学，无法计算出正确的方程式。今晚我会再试一次。我不知道Seadragon有一个纯JavaScript版本的Silverlight DeepZoom，我会去看看的，谢谢！ - Sunday Ironfoot

这是可行的，但不是一件直接的事情。您需要跟踪整个马赛克的左上角的虚拟像素坐标，以计算鼠标在马赛克上的位置。另一个困难的问题是moz-transform-offset指定了整个变换的中心，但您想将增量变换应用于变换的中心。 - Daniel Beardsley

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

- Sunday Ironfoot