JavaScript Image zoom with CSS3 Transforms，如何计算原点？ (举例)

Question

我正在尝试实现图像缩放效果，有点像缩放在 Google map 中的工作方式，但带有固定位置图像的网格。

我已经在这里上传了一个示例:

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 map 的功能。问题是，如果您向右放大图像，将光标移动到底部/左 Angular 并再次缩放，而不是缩放到图像的底部/左 Angular ，它会缩放到整个马赛克的底部/左侧.当您在四处移动鼠标(即使是轻微移动)时放大得更近时，这会产生在马赛克上跳来跳去的效果。

这基本上就是问题所在，我希望缩放的工作方式与 Google map 完全一样，它可以精确缩放到鼠标光标所在的位置，但我无法理解数学来计算变换原点:X/Y 值正确。请帮忙，现在已经坚持了 3 天了。

这里是鼠标滚轮事件的完整代码 list :

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 得到了很多帮助