前端制作放大镜特效

<template>
  <div>
    <div
      class="smDiv"
      @mouseover="handleOver"
      @mouseout="handleOut"
      @mousemove="handleMove"
      ref="smDiv"
    >
      <img src="./test/imgs/11.jpg" alt="" style="width: 100%; height: 100%" />
      <div class="zoom" ref="zoom"></div>
    </div>
    <div class="bigDiv" ref="bigDiv">
      <img
        src="./test/imgs/1.jpg"
        alt=""
        ref="bigImg"
        style="width: 900px; height: 775px"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabList: [
        "商品基本信息",
        "商品销售信息",
        "图片和详细信息",
        "商品组合",
        "售后服务",
        "包装清单",
        "其他信息",
      ],
      selected2: [], // 接收数据的对象
    };
  },
  mounted() {},
  methods: {
    //光标移入悬浮在小图容器
    handleOver(e) {
      this.$refs.zoom.style.display = "block";
      this.$refs.bigDiv.style.display = "block";
    },
    //光标移出小图容器
    handleOut(e) {
      this.$refs.zoom.style.display = "none";
      this.$refs.bigDiv.style.display = "none";
    },

    handleMove(e) {
      //计算放大镜的top
      var top = e.offsetY - this.$refs.zoom.offsetHeight / 2;
      //计算放大镜的left
      var left = e.offsetX - this.$refs.zoom.offsetWidth / 2;

      //计算放大镜最大的top与left
      var maxTop = this.$refs.smDiv.clientHeight - this.$refs.zoom.offsetHeight;
      var maxLeft = this.$refs.smDiv.clientWidth - this.$refs.zoom.offsetWidth;

      //限制放大镜移动范围不可超过小图容器的边界
      top = top < 0 ? 0 : top;
      top = top > maxTop ? maxTop : top;
      left = left < 0 ? 0 : left;
      left = left > maxLeft ? maxLeft : left;

      // 放大镜的位置
      this.$refs.zoom.style.top = top + "px";
      this.$refs.zoom.style.left = left + "px";

      //放大图在容器中的位置，大图是小图的三倍，所以乘以3
      this.$refs.bigImg.style.top = -3 * top + "px";
      this.$refs.bigImg.style.left = -3 * left + "px";
    },
  },
};
</script>
<style scoped>
.smDiv {
  width: 300px;
  height: 225px;
  border: 1px solid #000;
  position: relative;
}
.bigDiv {
  position: absolute;
  top: 8px;
  left: 330px;
  width: 330px;
  height: 330px;
  overflow: hidden;
  border: 1px solid #000;
  display: none;
}
.zoom {
  width: 110px;
  height: 111px;
  z-index: 99;
  background-color: #8484847b;
  position: absolute;
  top: 110;
  left: 0;
  cursor: move;
  pointer-events: none;
  display: none;
}
.bigDiv > img {
  position: absolute;
  top: 0;
  left: 0;
}
</style>