当前位置：首页 > VUE

vue实现放大镜原理

2026-01-12 05:28:40VUE

Vue 实现放大镜原理

实现放大镜效果的核心原理是通过鼠标移动事件获取位置信息，动态计算放大区域并显示放大后的图像。以下是基于 Vue 的实现方法：

基本结构设计

HTML 部分需包含原图容器、放大镜遮罩层和放大后的图像容器。

<template>
  <div class="magnifier-container">
    <img 
      class="original-image" 
      :src="imgSrc" 
      @mousemove="handleMouseMove"
      @mouseleave="handleMouseLeave"
    />
    <div 
      class="magnifier" 
      v-show="showMagnifier"
      :style="magnifierStyle"
    ></div>
    <div 
      class="zoomed-image" 
      v-show="showMagnifier"
      :style="zoomedImageStyle"
    ></div>
  </div>
</template>

数据与样式绑定

通过 Vue 的响应式数据控制放大镜的显示和位置。

<script>
export default {
  data() {
    return {
      imgSrc: 'path/to/image.jpg',
      showMagnifier: false,
      magnifierSize: 100,
      zoomLevel: 2,
      magnifierPosition: { x: 0, y: 0 },
      zoomedImagePosition: { x: 0, y: 0 }
    };
  },
  computed: {
    magnifierStyle() {
      return {
        width: `${this.magnifierSize}px`,
        height: `${this.magnifierSize}px`,
        left: `${this.magnifierPosition.x - this.magnifierSize / 2}px`,
        top: `${this.magnifierPosition.y - this.magnifierSize / 2}px`
      };
    },
    zoomedImageStyle() {
      return {
        backgroundImage: `url(${this.imgSrc})`,
        backgroundSize: `${this.zoomLevel * 100}%`,
        backgroundPosition: `-${this.zoomedImagePosition.x}px -${this.zoomedImagePosition.y}px`
      };
    }
  }
};
</script>

事件处理逻辑

监听鼠标移动事件，动态更新放大镜和放大图像的位置。

methods: {
  handleMouseMove(e) {
    const containerRect = e.target.getBoundingClientRect();
    const x = e.clientX - containerRect.left;
    const y = e.clientY - containerRect.top;

    this.magnifierPosition = { x, y };
    this.zoomedImagePosition = {
      x: x * this.zoomLevel - this.magnifierSize / 2,
      y: y * this.zoomLevel - this.magnifierSize / 2
    };
    this.showMagnifier = true;
  },
  handleMouseLeave() {
    this.showMagnifier = false;
  }
}

CSS 样式

通过 CSS 实现放大镜的圆形遮罩和放大图像的定位。

<style>
.magnifier-container {
  position: relative;
  display: inline-block;
}
.original-image {
  display: block;
  width: 100%;
}
.magnifier {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
.zoomed-image {
  position: absolute;
  width: 200px;
  height: 200px;
  left: calc(100% + 10px);
  border: 1px solid #ccc;
  background-repeat: no-repeat;
}
</style>