使用javascript写一个放大镜功能

以下是基于原生JavaScript实现的放大镜功能：

HTML代码：

<div id="container">
  <img id="small" src="small.jpg">
  <div id="mask"></div>
  <div id="big">
    <img src="big.jpg">
  </div>
</div>

CSS代码：

#container {
  width: 400px;
  height: 400px;
  position: relative;
}
#small {
  width: 400px;
  height: 400px;
}
#mask {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  cursor: move;
  display: none;
}
#big {
  width: 800px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 400px;
  overflow: hidden;
  display: none;
}
#big img {
  width: 800px;
  height: 800px;
}

JavaScript代码：

var container = document.getElementById("container");
var smallImg = document.getElementById("small");
var mask = document.getElementById("mask");
var bigImg = document.getElementById("big").getElementsByTagName("img")[0];

// 鼠标移入容器显示放大镜和大图
container.addEventListener("mouseenter", function() {
  mask.style.display = "block";
  bigImg.style.display = "block";
});

// 鼠标移出容器隐藏放大镜和大图
container.addEventListener("mouseleave", function() {
  mask.style.display = "none";
  bigImg.style.display = "none";
});

// 鼠标在容器内移动时更新放大镜和大图的位置
container.addEventListener("mousemove", function(event) {
  var left = event.clientX - container.offsetLeft - mask.offsetWidth / 2;
  var top = event.clientY - container.offsetTop - mask.offsetHeight / 2;
  var maxLeft = container.offsetWidth - mask.offsetWidth;
  var maxTop = container.offsetHeight - mask.offsetHeight;
  if (left < 0) {
    left = 0;
  }
  if (left > maxLeft) {
    left = maxLeft;
  }
  if (top < 0) {
    top = 0;
  }
  if (top > maxTop) {
    top = maxTop;
  }
  mask.style.left = left + "px";
  mask.style.top = top + "px";
  var scaleX = bigImg.offsetWidth / smallImg.offsetWidth;
  var scaleY = bigImg.offsetHeight / smallImg.offsetHeight;
  bigImg.style.left = -left * scaleX + "px";
  bigImg.style.top = -top * scaleY + "px";
});

注释已经详细解释了每个步骤的实现过程，可以根据需要进行修改和优化。