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';
});

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