使用javascript在悬停时放大图片

我是JS的新手

这是我的密码：

html

<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAA20AAAAJDZhZjAwOTE3LTExMDQtNDE5OC05NDdhLWUxYTU0ODJiZTdkYQ.png">
<div id="overlay" onmousemove="zoomIn(event)"></div>

js

#overlay {
  border: 1px solid black;
  width: 450px;
  height: 450px;
  position: absolute;
  display: inline-block;
  background-image: url('https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAA20AAAAJDZhZjAwOTE3LTExMDQtNDE5OC05NDdhLWUxYTU0ODJiZTdkYQ.png');
  background-repeat: no-repeat;
}

function zoomIn(event) {
  var element = document.getElementById("overlay");
  element.style.display = "inline-block";
  var img = document.getElementById("imgZoom");
  var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
  var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
  element.style.backgroundPosition = (-posX * 1) + "px " + (-posY * 1) + "px";

}

function zoomOut() {
  var element = document.getElementById("overlay");
  element.style.display = "none";
}

出现的问题：如果您看到，那么当我将鼠标移到左边的图片上时，右边（缩放）的图片并没有正确地跟随缩放。我做错了什么

此外，如何更改缩放级别（缩放更近）

---

提前感谢。

您需要进行一些计算，以添加额外的偏移量，将img放置在div的中心

 var offY = (element.clientHeight -img.clientHeight)/2;
 var offX = (element.clientWidth -img.clientWidth)/2;

---

编辑

乍一看，我注意到

event.offsetX？（event.offsetX）：如果
event.offsetX
为
0
，则event.pageX-img.offsetLeft

将运行

event.pageX-img.offsetLeft

。是吗？如果是这样，您应该将其更改为

typeof event.offsetX==“number”？event.offsetX:event.pageX-img.offsetLeft

@MikaelLennholm对不起，我没听清楚你的意思。也许你可以试着把它作为答案贴出来（这样更容易看到/理解）？此外，我还编辑了右容器，其中将显示缩放的图片。现在，我在容器的侧面得到了放大的图片。。。我怎么才能把它放在中心呢？好的，我会这样做，希望它能成为一个真正的答案对不起，在实际尝试了你的代码并看到问题所在之后，我意识到它与我的建议没有任何关系。