如何用JS实现图片放大镜？

<div class="img-container">
  @@##@@
  <div id="lens"></div>
</div>
<div id="result"></div>

const imgContainer = document.querySelector('.img-container');
const originalImg = document.getElementById('originalImg');
const lens = document.getElementById('lens');
const result = document.getElementById('result');

// 设置放大镜和结果容器的样式
lens.style.width = '100px';
lens.style.height = '100px';
result.style.width = '300px';
result.style.height = '300px';

// 监听鼠标移动事件
imgContainer.addEventListener('mousemove', (e) => {
  // 获取鼠标在图片上的坐标
  const x = e.clientX - imgContainer.offsetLeft;
  const y = e.clientY - imgContainer.offsetTop;

  // 防止放大镜超出图片边界
  let lensX = x - lens.offsetWidth / 2;
  let lensY = y - lens.offsetHeight / 2;

  lensX = Math.max(0, Math.min(lensX, originalImg.offsetWidth - lens.offsetWidth));
  lensY = Math.max(0, Math.min(lensY, originalImg.offsetHeight - lens.offsetHeight));

  // 设置放大镜的位置
  lens.style.left = lensX + 'px';
  lens.style.top = lensY + 'px';

  // 设置放大后图片的位置和背景
  result.style.backgroundImage = `url(${originalImg.src})`;
  result.style.backgroundSize = `${originalImg.width * 2}px ${originalImg.height * 2}px`; // 放大倍数
  result.style.backgroundPosition = `-${lensX * 2}px -${lensY * 2}px`; // 放大倍数
});

//鼠标移开时隐藏放大镜和结果容器
imgContainer.addEventListener('mouseleave', () => {
    lens.style.display = 'none';
    result.style.display = 'none';
});

//鼠标移入时显示放大镜和结果容器
imgContainer.addEventListener('mouseenter', () => {
    lens.style.display = 'block';
    result.style.display = 'block';
});