当前位置：首页 > VUE

vue实现放大镜原理

2026-03-06 18:23:09VUE

Vue 实现放大镜原理

放大镜效果通常用于电商网站的商品图片展示，通过鼠标移动在小图上显示局部放大效果。以下是基于 Vue 的实现方法：

vue实现放大镜原理

基本结构

需要准备两个元素：小图容器（带遮罩层）和大图容器。小图容器显示原始图片，大图容器显示放大后的局部区域。

vue实现放大镜原理

<template>
  <div class="magnifier-container">
    <div class="small-img" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
      <img :src="smallImgUrl" ref="smallImg">
      <div class="mask" ref="mask" v-show="showMask"></div>
    </div>
    <div class="large-img" v-show="showLargeImg">
      <img :src="largeImgUrl" ref="largeImg">
    </div>
  </div>
</template>

核心逻辑

通过计算鼠标位置与遮罩层的关系，同步移动大图的显示区域。

export default {
  data() {
    return {
      smallImgUrl: 'small-image.jpg',
      largeImgUrl: 'large-image.jpg',
      showMask: false,
      showLargeImg: false,
      maskWidth: 100,
      maskHeight: 100
    }
  },
  methods: {
    handleMouseMove(e) {
      this.showMask = true
      this.showLargeImg = true

      const smallImg = this.$refs.smallImg
      const mask = this.$refs.mask
      const largeImg = this.$refs.largeImg

      const imgRect = smallImg.getBoundingClientRect()
      const x = e.pageX - imgRect.left - window.scrollX - this.maskWidth / 2
      const y = e.pageY - imgRect.top - window.scrollY - this.maskHeight / 2

      // 限制遮罩层不超出图片范围
      const maxX = imgRect.width - this.maskWidth
      const maxY = imgRect.height - this.maskHeight

      let maskX = Math.max(0, Math.min(x, maxX))
      let maskY = Math.max(0, Math.min(y, maxY))

      mask.style.left = `${maskX}px`
      mask.style.top = `${maskY}px`

      // 计算大图移动比例
      const scaleX = largeImg.width / smallImg.width
      const scaleY = largeImg.height / smallImg.height

      largeImg.style.left = `-${maskX * scaleX}px`
      largeImg.style.top = `-${maskY * scaleY}px`
    },
    handleMouseLeave() {
      this.showMask = false
      this.showLargeImg = false
    }
  }
}

样式设置

CSS 部分需要设置遮罩层和大图容器的样式，确保视觉效果正确。

.magnifier-container {
  display: flex;
  position: relative;
}

.small-img {
  position: relative;
  cursor: crosshair;
}

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

.large-img {
  position: absolute;
  left: 100%;
  width: 400px;
  height: 400px;
  overflow: hidden;
  border: 1px solid #eee;
}

.large-img img {
  position: absolute;
}