用原生js写个放大镜功能

好的，以下是一个简单的原生JS实现放大镜功能的代码：

HTML：

<div class="container">
  <img src="image.jpg" alt="product image" id="product-image">
  <div class="magnifier"></div>
</div>

CSS：

.container {
  position: relative;
}

.magnifier {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  display: none;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 400px 400px;
  background-position: 0 0;
}

JS：

const container = document.querySelector('.container');
const magnifier = document.querySelector('.magnifier');
const productImage = document.querySelector('#product-image');

container.addEventListener('mousemove', e => {
  const containerRect = container.getBoundingClientRect();
  const x = e.clientX - containerRect.left;
  const y = e.clientY - containerRect.top;
  const magnifierSize = 200;
  const imageWidth = productImage.width;
  const imageHeight = productImage.height;
  const ratioX = imageWidth / containerRect.width;
  const ratioY = imageHeight / containerRect.height;
  const bgPosX = -x * ratioX + magnifierSize / 2;
  const bgPosY = -y * ratioY + magnifierSize / 2;
  
  magnifier.style.display = 'block';
  magnifier.style.left = `${x - magnifierSize / 2}px`;
  magnifier.style.top = `${y - magnifierSize / 2}px`;
  magnifier.style.backgroundImage = `url(${productImage.src})`;
  magnifier.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
});

container.addEventListener('mouseleave', () => {
  magnifier.style.display = 'none';
});

这段代码会在鼠标移动到图片上时，显示一个放大镜，并在放大镜内显示鼠标所在位置的图片放大后的部分。当鼠标移开图片时，放大镜会隐藏。