图片放大镜效果

 // 父组件中使用
<pic-zoom
  :qall="item.exportPath | getImgSrc"
  :qall-big="item.exportPath | getImgSrc"
  :img-width="400"
  :img-height="300"
  :marks-width="100"
  :marks-height="100"
  :big-img-border-width="300"
  :big-img-border-height="300"
  :radio="3"
  :n="3"
  :current-index="index"
/>
 // 放大镜组件
<template>
  <div>
    <div class="productLeft">
      <!-- 原图  -->
      <div class="mdImg" :style="{width:imgWidth + 'px',height:imgHeight+'px'}">
        <img :src="qall" alt="">
      </div>
      <!-- 遮罩层-放大镜  -->
      <div v-show="showMarksAndLgImg" class="marks" :style="{top:top+'px',left:left+'px',width:marksWidth+'px',height:marksHeight+'px'}" />
      <!-- 遮罩层 玻璃板 superMarks -->
      <div
        class="superMarks"
        :style="{width:imgWidth + 'px',height:imgHeight+'px'}"
        @mouseenter="enterSuperMarks"
        @mouseleave="leaveSuperMarks"
        @mousemove="moveInSuperMarks"
      />
      <!-- 大图容器和大图片 -->
      <div v-show="showMarksAndLgImg" class="lgImg" :style="{width:bigImgBorderWidth + 'px',height:bigImgBorderHeight+'px',left: showRight?(imgWidth + 5) +'px':-(bigImgBorderWidth + 5) +'px'}">
        <img :src="qallBig" alt="" :style="{top:topLgImg+'px',left:leftLgImg+'px',width:bigImgWidth + 'px',height:bigImgHeight+'px'}">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BlogHeader',
  props: {
    // 原图
    qall: {
      type: String,
      default: '',
      // default: 'https://seopic.699pic.com/photo/40075/1965.jpg_wh1200.jpg',
    },
    // 大图
    qallBig: {
      type: String,
      default: '',
    },
    // 原图宽高
    imgWidth: {
      type: Number,
      default: 300,
    },
    imgHeight: {
      type: Number,
      default: 200,
    },
    // 遮罩图宽高
    marksWidth: {
      type: Number,
      default: 80,
    },
    marksHeight: {
      type: Number,
      default: 80,
    },
    // 放大图框的宽高
    bigImgBorderWidth: {
      type: Number,
      default: 300,
    },
    bigImgBorderHeight: {
      type: Number,
      default: 300,
    },
    radio: {
      type: Number,
      default: 4,
    },
    n: {
      type: Number,
      default: 2,
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      showMarksAndLgImg: false, // 控制遮罩层marks和大图片是否显示
      leftLgImg: 0, // 大图lgImg移动的位置
      topLgImg: 0, // 大图lgImg移动的位置
      left: 0, // marks左移位置
      top: 0, // marks下移位置
    };
  },
  computed: {
    showRight() {
      const mid = Math.floor(this.n / 2);
      if (this.currentIndex <= mid) {
        return true;
      }
      return false;
    },
    // 大图的尺寸
    bigImgWidth () {
      return this.imgWidth * this.radio;
    },
    bigImgHeight () {
      return this.imgHeight * this.radio;
    },
  },
  methods: {
    // 鼠标进入和离开遮罩层
    enterSuperMarks() {
      this.showMarksAndLgImg = true;
    },
    leaveSuperMarks() {
      this.showMarksAndLgImg = false;
    },
    // 遮罩层放大镜
    moveInSuperMarks(e) {
      // e.offsetX鼠标的x坐标相对图片左边的距离
      // 放大镜宽高
      const marksWidth = this.marksWidth;
      const marksHeight = this.marksHeight;
      // supermarks宽高
      const imgWidth = this.imgWidth;
      const imgHeight = this.imgHeight;
      // marks距离小图容器左边的距离
      this.left = e.offsetX - marksWidth / 2;
      this.top = e.offsetY - marksHeight / 2;
      if (this.left < 0) {
        this.left = 0;
      } else if (this.left > imgWidth - marksWidth) {
        this.left = imgWidth - marksWidth;
      }
      if (this.top < 0) {
        this.top = 0;
      } else if (this.top > imgHeight - marksHeight) {
        this.top = imgHeight - marksHeight;
      }
      // 放大镜左侧占遮罩层的比例
      const persentX = this.left / (imgWidth - marksWidth);
      const persentY = this.top / (imgHeight - marksHeight);
      // 大d图片除以小的图片的宽高
      this.leftLgImg = -(this.bigImgWidth - this.bigImgBorderWidth) * persentX;
      this.topLgImg = -(this.bigImgHeight - this.bigImgBorderHeight) * persentY;
    },

  },
};
</script>
<style lang="scss" scoped>
  /* 左侧大小图样式 */
  .productLeft {
    position: relative;
  }

  /* 左侧中图 */
  .mdImg {
    img {
      width: 100%;
      height: 100%;
    }
  }

  /* 遮罩层superMarks */
  .superMarks {
    background-color: rgba(220, 220, 220, 0);
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
  }

  /* 遮罩层 */
  .marks {
    position: absolute;
    background-color: rgba(220, 220, 220, 0.5);
  }

  /* 左侧隐藏大图 */
  .lgImg {
    overflow: hidden;
    position: absolute;
    top: 0;
    background-color: #fff;
    z-index: 9;
  }

  .lgImg img {
    position: absolute;
  }
</style>