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

Question

我正在尝试实现图像缩放效果，有点类似于 Google 地图的缩放效果，但具有固定位置图像网格。

我已经在这里上传了到目前为止我所拥有的示例：

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 地图的功能。问题是，如果您放大图像，将光标移动到左下角并再次缩放，它不会缩放到图像的下/左角，而是放大到整个马赛克的下/左角。当您在移动鼠标（甚至是轻微移动）的同时放大更近时，这会产生在马赛克周围跳跃的效果。

这基本上就是问题所在，我希望缩放功能与 Google 地图完全一样，它可以精确缩放到鼠标光标位置所在的位置，但我无法专注于数学来正确计算变换原点：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;
});

Answer 1

终于弄清楚了，请看这里：

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

使用鼠标滚轮缩放，也可以拖动图像，仅适用于最新的 Safari、Opera 和 Firefox（由于某些原因，图像在 Chrome 上模糊）。在某些区域也有点问题。在 DocType http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example上得到了很多帮助