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

我正在尝试实现一种图像缩放效果，有点像谷歌地图的缩放效果，但使用的是固定位置的网格图像

我在这里上传了一个到目前为止的示例：

（使用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;
});

var标度=1；
$（“#mosaicContainer”）.mousewheel（函数（e，delta）
{
如果（增量>0）
{
标度+=1；
}
其他的
{
比例-=1；
}
刻度=刻度<1？1：（刻度>40？40：刻度）；
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'）；
返回false；
});

终于找到了答案，请在此处查看：

---

使用鼠标滚轮进行缩放，也可以拖动图像，仅在最新的Safari、Opera和Firefox上正常工作（由于某些原因，Chrome上的图像模糊）。在某些地区也有点车。DocType的人帮了很多忙

是的，你说得对，只是我数学不好，不能算出正确的方程式。今晚我再试试看。我不知道Seadragon有一个Silverlight DeepZoom的纯JavaScript版本，我来看看，干杯！这是可行的，但不是直截了当的。您必须跟踪整个马赛克左上角的虚拟像素坐标，以计算鼠标在马赛克上的位置。另一个棘手的问题是

moz transform offset

指定整个变换的中心，但您希望对变换中心应用增量变换。