vue实现放大镜原理

Vue 实现放大镜效果

放大镜效果常见于电商网站的商品展示，通过鼠标悬停或移动实现局部放大。以下是基于 Vue 的实现方法：

核心原理

1. 布局结构：主容器包含小图区域和放大镜区域。
2. 事件监听：通过 mousemove 事件获取鼠标位置。
3. 遮罩层联动：根据鼠标位置计算遮罩层位置和放大区域显示内容。
4. CSS 控制：使用 background-size 和 background-position 实现放大效果。

实现步骤

模板部分

<template>
  <div class="magnifier-container">
    <div 
      class="small-img" 
      @mousemove="handleMouseMove"
      @mouseenter="showMagnifier = true"
      @mouseleave="showMagnifier = false"
    >
      <img :src="smallImg" alt="商品图">
      <div 
        class="mask" 
        v-show="showMagnifier"
        :style="{ left: maskLeft + 'px', top: maskTop + 'px' }"
      ></div>
    </div>
    <div 
      class="large-img" 
      v-show="showMagnifier"
      :style="{
        backgroundImage: `url(${largeImg})`,
        backgroundPosition: `-${bgPosX}px -${bgPosY}px`
      }"
    ></div>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      smallImg: 'small-image.jpg',  // 小图路径
      largeImg: 'large-image.jpg',  // 大图路径
      showMagnifier: false,
      maskLeft: 0,
      maskTop: 0,
      bgPosX: 0,
      bgPosY: 0,
      maskWidth: 100,  // 遮罩层宽度
      maskHeight: 100  // 遮罩层高度
    }
  },
  methods: {
    handleMouseMove(e) {
      const container = e.currentTarget
      const rect = container.getBoundingClientRect()

      // 计算遮罩层位置（居中于鼠标）
      this.maskLeft = e.clientX - rect.left - this.maskWidth / 2
      this.maskTop = e.clientY - rect.top - this.maskHeight / 2

      // 边界限制
      this.maskLeft = Math.max(0, Math.min(this.maskLeft, rect.width - this.maskWidth))
      this.maskTop = Math.max(0, Math.min(this.maskTop, rect.height - this.maskHeight))

      // 计算背景图位置（按放大比例缩放）
      const scale = 2  // 放大倍数
      this.bgPosX = this.maskLeft * scale
      this.bgPosY = this.maskTop * scale
    }
  }
}
</script>

样式部分

<style>
.magnifier-container {
  display: flex;
  gap: 20px;
}

.small-img {
  position: relative;
  width: 400px;
  height: 400px;
  cursor: crosshair;
}

.small-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mask {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid #ddd;
  pointer-events: none;
}

.large-img {
  width: 400px;
  height: 400px;
  background-size: 800px 800px;  /* 小图尺寸 × 放大倍数 */
  background-repeat: no-repeat;
  border: 1px solid #eee;
}
</style>

优化方向

1. 性能优化：对大图使用懒加载，避免初次加载过慢。
2. 动态计算：根据容器尺寸自动计算遮罩层大小和放大倍数。
3. 移动端适配：增加触摸事件支持（touchmove）。
4. 过渡动画：添加 CSS 过渡效果使移动更平滑。

注意事项

• 大图尺寸应为小图的整数倍（如放大 2 倍则大图长宽是小图的 2 倍）。
• 遮罩层尺寸与 background-size 的比例需保持一致。
• 实际项目中建议使用 v-if 替代 v-show 避免不必要的 DOM 渲染。