我正在尝试实现图像缩放效果，有点类似于 Google 地图的缩放效果，但具有固定位置图像网格。
我已经在这里上传了到目前为止我所拥有的示例：
http://www.dominicpettifer.co.uk/Files/MosaicZoom.html 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;
});
