当前位置：首页 > VUE

vue实现放大镜原理

2026-01-07 04:52:11VUE

Vue 实现放大镜效果

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

vue实现放大镜原理

核心原理

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

实现步骤

模板部分

vue实现放大镜原理

<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>