目标很简单，使用鼠标滚轮放大特定点（鼠标所在的位置）。这意味着缩放后，鼠标将位于图片的大致相同位置。

(Purely illustrative, I don't care if you use dolphins, ducks or madonna for the image)

我不想使用画布，到目前为止我已经尝试过这样的事情：

HTML

<img src="whatever">

JS

function zoom(e){
    var deltaScale = deltaScale || -e.deltaY / 1000;
    var newScale = scale + deltaScale;
    var newWidth = img.naturalWidth * newScale;
    var newHeight = img.naturalHeight * newScale;
    var x = e.pageX;
    var y = e.pageY;
    var newX = x * newWidth / img.width;
    var newY = y * newHeight / img.height;
    var deltaX = newX - x;
    var deltaY = newY - y;
    setScale(newScale);
    setPosDelta(-deltaX,-deltaY);
}

function setPosDelta(dX, dY) {
    var imgPos = getPosition();
    setPosition(imgPos.x + dX, imgPos.y + dY);
}

function getPosition() {
    var x = parseFloat(img.style.left);
    var y = parseFloat(img.style.top);
    return {
        x: x,
        y: y
    }
}

function setScale(n) {
    scale = n;
    img.width = img.naturalWidth * n;
    img.height = img.naturalHeight * n;
}

这试图做的是计算x,y 坐标海豚的眼睛before and after缩放，计算出这两点之间的距离后，将其从left,top位置以校正变焦位移，但没有特别成功。

缩放自然地将图像延伸到右侧和底部，因此校正尝试拉回左侧和顶部，以便将鼠标保持在该死的海豚眼睛上！但绝对不是。

告诉我，代码/数学有什么问题？我觉得这个问题不太宽泛，考虑到除了画布之外我找不到任何解决方案。

Thanks!

[编辑] 重要

CSS 变换顺序很重要，如果您遵循所选答案，请确保先对过渡进行排序，然后再对比例进行排序。 CSS 变换向后执行（右到左）因此将首先处理缩放，然后再处理平移。

这是缩放到一个点的实现。代码使用CSS 2D转换 https://developer.mozilla.org/en-US/docs/Web/CSS/transform包括通过单击并拖动来平移图像。这很容易，因为规模没有变化。

缩放时的技巧是首先使用当前比例标准化偏移量（换句话说：将其除以当前比例），然后将新比例应用于该标准化偏移。这使光标准确地保持在与比例无关的位置。

var scale = 1,
    panning = false,
    xoff = 0,
    yoff = 0,
    start = {x: 0, y: 0},
    doc = document.getElementById("document");

function setTransform() {
  doc.style.transform = "translate(" + xoff + "px, " + yoff + "px) scale(" + scale + ")";
}

doc.onmousedown = function(e) {
  e.preventDefault();
  start = {x: e.clientX - xoff, y: e.clientY - yoff};    
  panning = true;
}

doc.onmouseup = function(e) {
  panning = false;
}

doc.onmousemove = function(e) {
  e.preventDefault();         
  if (!panning) {
    return;
  }
  xoff = (e.clientX - start.x);
  yoff = (e.clientY - start.y);
  setTransform();
}

doc.onwheel = function(e) {
    e.preventDefault();
    // take the scale into account with the offset
    var xs = (e.clientX - xoff) / scale,
        ys = (e.clientY - yoff) / scale,
        delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);

    // get scroll direction & set zoom level
    (delta > 0) ? (scale *= 1.2) : (scale /= 1.2);

    // reverse the offset amount with the new scale
    xoff = e.clientX - xs * scale;
    yoff = e.clientY - ys * scale;

    setTransform();          
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#document {
  width: 100%;
  height: 100%;
  transform-origin: 0px 0px;
  transform: scale(1) translate(0px, 0px);
}

<div id="document">
  <img style="width: 100%"
       src="https://i.imgur.com/fHyEMsl.jpg"
       crossOrigin="" />
</div>