提升网店浏览体验：Vue 实现鼠标移动放大部分区域图片

前端

2023-09-15 00:04:42

前言

在电子商务领域，商品详情页的视觉呈现至关重要。为了让用户获得更直观的购物体验，放大图片功能应运而生。它允许用户近距离查看商品的细节，打消疑虑，做出更明智的购买决策。京东等知名电商平台已经广泛采用了这一功能，获得了用户的广泛好评。

Vue 实现原理

要使用 Vue 实现鼠标移动放大部分区域图片，需要利用 Vue 的计算属性和侦听器。具体步骤如下：

侦听鼠标移动事件： 在 Vue 实例中侦听鼠标在图片上的移动事件，并捕获鼠标当前的 X、Y 坐标。
计算放大区域： 根据鼠标坐标和图片尺寸计算出需要放大的区域。
使用 CSS 放大图片： 使用 CSS 的 transform 属性将放大区域进行放大，并将其定位到图片的右侧。
控制悬浮窗口的显示/隐藏： 当鼠标移入图片时显示放大悬浮窗口，移出时隐藏。

代码示例

以下代码展示了如何在 Vue 中实现鼠标移动放大部分区域图片：

<template>
  <div class="container">
    <div class="image-wrapper">
      <img @mousemove="handleMouseMove" :src="imageUrl" />
    </div>
    <div class="magnifier-wrapper" v-if="isMagnifierVisible">
      <img :src="imageUrl" :style="magnifierStyle" />
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const imageUrl = ref('')
    const isMagnifierVisible = ref(false)
    const imageWrapperRef = ref(null)
    const magnifierWrapperRef = ref(null)
    const magnifierStyle = computed(() => {
      if (!imageWrapperRef.value || !magnifierWrapperRef.value) return
      const imageWrapperRect = imageWrapperRef.value.getBoundingClientRect()
      const magnifierWrapperRect = magnifierWrapperRef.value.getBoundingClientRect()
      const scale = 2
      const left = (event.clientX - imageWrapperRect.left) * scale - magnifierWrapperRect.width / 2
      const top = (event.clientY - imageWrapperRect.top) * scale - magnifierWrapperRect.height / 2
      return {
        transform: `translate(${left}px, ${top}px) scale(${scale})`,
      }
    })

    const handleMouseMove = (event) => {
      isMagnifierVisible.value = true
      if (!imageWrapperRef.value) return
      const imageWrapperRect = imageWrapperRef.value.getBoundingClientRect()
      const x = event.clientX - imageWrapperRect.left
      const y = event.clientY - imageWrapperRect.top
      if (x < 0 || x > imageWrapperRect.width || y < 0 || y > imageWrapperRect.height) {
        isMagnifierVisible.value = false
      }
    }

    return {
      imageUrl,
      isMagnifierVisible,
      imageWrapperRef,
      magnifierWrapperRef,
      magnifierStyle,
      handleMouseMove,
    }
  },
}
</script>

<style>
.container {
  position: relative;
}

.image-wrapper {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
}

.magnifier-wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.magnifier-wrapper img {
  max-width: 100%;
  max-height: 100%;
}
</style>