VUE3 实现淘宝放大镜效果

前端

2023-09-11 23:13:15

前言

欢迎来到本教程，我们将一起学习如何使用 Vue3 实现淘宝放大镜效果。放大镜效果是一种常见的交互效果，当用户将鼠标悬停在小图上时，大图会放大显示。这种效果通常用于商品详情页，以便用户能够更仔细地查看商品的细节。

实现原理

淘宝放大镜效果的实现原理并不复杂，主要包括以下几个步骤：

准备小图、遮罩和大图。小图是用户看到的缩略图，遮罩是覆盖在小图上的半透明层，大图是放大后的图像。
将小图、遮罩和大图分别放入三个不同的元素中，并将这三个元素定位成相对位置。
给遮罩元素添加鼠标悬停事件监听器。当用户将鼠标悬停在遮罩上时，放大镜效果就会触发。
在鼠标悬停事件的回调函数中，计算出鼠标在遮罩上的位置。
根据鼠标的位置计算出大图应该放大的倍数。
将大图的放大倍数应用到放大镜元素上。

实现步骤

1. 准备小图、遮罩和大图

首先，我们需要准备小图、遮罩和大图。小图和遮罩的尺寸可以根据需要设置，大图的尺寸应大于小图。

2. 将小图、遮罩和大图分别放入三个不同的元素中

接下来，我们将小图、遮罩和大图分别放入三个不同的元素中。这三个元素可以是 <img> 元素、<div> 元素或其他元素。

3. 将这三个元素定位成相对位置

接下来，我们将这三个元素定位成相对位置。这可以确保当用户将鼠标悬停在遮罩上时，大图能够正确地放大。

4. 给遮罩元素添加鼠标悬停事件监听器

接下来，我们需要给遮罩元素添加鼠标悬停事件监听器。当用户将鼠标悬停在遮罩上时，放大镜效果就会触发。

5. 在鼠标悬停事件的回调函数中，计算出鼠标在遮罩上的位置

在鼠标悬停事件的回调函数中，我们需要计算出鼠标在遮罩上的位置。我们可以使用 event.clientX 和 event.clientY 属性来获取鼠标的坐标。

6. 根据鼠标的位置计算出大图应该放大的倍数

根据鼠标在遮罩上的位置，我们可以计算出大图应该放大的倍数。放大倍数可以根据需要设置，但通常情况下，放大倍数应大于 1。

7. 将大图的放大倍数应用到放大镜元素上

最后，我们将大图的放大倍数应用到放大镜元素上。这可以确保当用户将鼠标悬停在遮罩上时，大图能够正确地放大。

代码示例

<template>
  <div class="magnify-container">
    <div class="magnify-small-image">
      <img src="small.jpg" alt="" />
    </div>
    <div class="magnify-mask"></div>
    <div class="magnify-large-image">
      <img src="large.jpg" alt="" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const maskX = ref(0)
    const maskY = ref(0)
    const largeImageScale = ref(1)

    const handleMaskMousemove = (event) => {
      maskX.value = event.clientX
      maskY.value = event.clientY

      const maskRect = event.target.getBoundingClientRect()
      const maskWidth = maskRect.width
      const maskHeight = maskRect.height

      const relativeX = maskX.value - maskRect.left
      const relativeY = maskY.value - maskRect.top

      largeImageScale.value = 2 + (relativeX / maskWidth) + (relativeY / maskHeight)
    }

    return {
      maskX,
      maskY,
      largeImageScale,
      handleMaskMousemove,
    }
  },
}
</script>

<style>
.magnify-container {
  position: relative;
}

.magnify-small-image {
  position: relative;
  overflow: hidden;
}

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

.magnify-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: crosshair;
}

.magnify-large-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  transition: all 0.2s ease-in-out;
}

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

.magnify-container:hover .magnify-large-image {
  opacity: 1;
  pointer-events: all;
}

.magnify-container:hover .magnify-large-image img {
  transform: scale(var(--magnify-scale));
}
</style>