放大镜效果js等比例法

放大镜效果是一种常见的前端交互效果，通常用于电商网站的商品展示、图片编辑器等场景。等比例放大是指在放大镜效果中，保持图片的宽高比不变，避免图片变形。下面我将详细介绍放大镜效果的基础概念、实现方法、优势、应用场景以及可能遇到的问题和解决方案。

基础概念

放大镜效果是指在用户鼠标悬停在图片上时，显示一个放大的图片视图，通常是通过创建一个覆盖在原图上的半透明遮罩层，并在其中显示放大后的图片部分。

实现方法（JavaScript + CSS）

以下是一个简单的等比例放大镜效果的实现示例：

HTML结构

<div class="magnifier">
  <img src="path/to/image.jpg" alt="Image" id="magnifier-image">
  <div class="magnifier-lens"></div>
  <div class="magnifier-result"></div>
</div>

CSS样式

.magnifier {
  position: relative;
  display: inline-block;
}

.magnifier-lens {
  position: absolute;
  border: 1px solid #000;
  width: 100px; /* 放大镜的宽度 */
  height: 100px; /* 放大镜的高度 */
  background-color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  display: none;
}

.magnifier-result {
  position: absolute;
  top: 0;
  left: 100%;
  width: 300px; /* 放大结果的宽度 */
  height: 300px; /* 放大结果的高度 */
  border: 1px solid #000;
  overflow: hidden;
  display: none;
  z-index: 10;
}

JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
  const image = document.getElementById('magnifier-image');
  const lens = document.querySelector('.magnifier-lens');
  const result = document.querySelector('.magnifier-result');

  const cx = result.offsetWidth / lens.offsetWidth;
  const cy = result.offsetHeight / lens.offsetHeight;

  image.addEventListener('mousemove', moveLens);
  lens.addEventListener('mousemove', moveLens);

  function moveLens(e) {
    e.preventDefault();
    const pos = getCursorPos(e);
    let x = pos.x - (lens.offsetWidth / 2);
    let y = pos.y - (lens.offsetHeight / 2);

    if (x > image.width - lens.offsetWidth) { x = image.width - lens.offsetWidth; }
    if (x < 0) { x = 0; }
    if (y > image.height - lens.offsetHeight) { y = image.height - lens.offsetHeight; }
    if (y < 0) { y = 0; }

    lens.style.left = x + 'px';
    lens.style.top = y + 'px';
    result.style.backgroundPosition = `-${x * cx}px -${y * cy}px`;
  }

  function getCursorPos(e) {
    let a = image.getBoundingClientRect();
    return {
      x: e.pageX - a.left - window.pageXOffset,
      y: e.pageY - a.top - window.pageYOffset
    };
  }

  image.addEventListener('mouseenter', () => {
    lens.style.display = 'block';
    result.style.display = 'block';
    result.style.backgroundImage = `url(${image.src})`;
    result.style.backgroundSize = `${image.width * cx}px ${image.height * cy}px`;
  });

  image.addEventListener('mouseleave', () => {
    lens.style.display = 'none';
    result.style.display = 'none';
  });
});