博客

![在这里插入图片描述](https://img-blog.csdnimg.cn/5925e8464b0d4b858cad77c75f068ef8.png#pic_center)

![在这里插入图片描述](https://blog.csdn.net/yehaocheng520/article/details/119003274#pic_center)



<div class="big-img-box" ref="big-img-box" @mouseleave="moveend">
  <div class="imgWrap" @mouseenter="movestart" @mousemove.stop>
    <img :src="HOST + commonUploadFileUrl + bigImgsrc" alt="" />
  </div>
  <div
    v-if="bigImgUrl"
    @mousemove.stop
    @mousemove="move"
    class="move"
    ref="move"
    :style="{ left: -left / 3 + 'px ', top: -top / 3 + 'px' }"
  ></div>
  <div
    class="bigPic"
    ref="bigPic"
    v-if="bigImgUrl"
    :style="{ backgroundPosition: left + 'px ' + top + 'px' }"
  ></div>
</div>

<div class="small-img-box">
  <div class="img-content-box">
    <ul>
      <li
        v-for="(item, index) in detailInfo.images"
        :key="index"
        @mouseover="handleBigImg(item, index)"
        :class="{ smallImgBorder: currentSmallImgIndex == index }"
      >
        <img :src="HOST + commonUploadFileUrl + item.src" alt="" />
      </li>
    </ul>
  </div>
</div>


css
.big-img-box {
  width: 480px;
  height: 360px;
  margin: 0 0 20px;
  border: 1px solid #eee;
  position: relative;
}
 .imgWrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .move {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 255, 0.15);
    cursor: move;
  }
  .bigPic {
    width: 480px;
    height: 480px;
    position: absolute;
    left: 480px;
    top: 0;
    border: 2px solid #f90;
    background-position: 0 0;
    background-size: 300% 300%;
    background-repeat: no-repeat;
    z-index: 2;
  }


// 循环图片样式
.small-img-box {
  width: 480px;
  height: 70px;
  position: relative;
  .img-content-box {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: block;
    ul {
      width: 105%;
      height: 100%;
      li {
        display: inline-block;
        width: 88px;
        height: 100%;
        margin-right: 10px;
        overflow: hidden;
        img {
          display: block;
          width: 100%;
        }
      }
    }
  }
}


// 方法
 //鼠标移入后，就要展示选择框，因此鼠标移入的位置跟选择框的位置有关
movestart(e) {
  this.move(e);
  this.bigImgUrl = this.bigImgsrc;
  var imgUrl = this.HOST + this.commonUploadFileUrl + this.bigImgUrl;//这个就是当前图片的路径，不管多管
  this.$nextTick(() => {//页面加载完成后，更改大图的`backgroundImage`,这个也可以直接在html中动态绑定style，那样会简单很多
    this.$refs.bigPic.style.backgroundImage = `url(${imgUrl})`;
  });
},


//鼠标移动时，选择框的位置也会发现改变
move(e) {
  var left = e.pageX - this.oAppLeft - 100;
  var top = e.pageY - this.oAppTop - 100;
  if (left < 0) {
    left = 0;
  } else if (left > 280) {
    left = 280;
  }
  if (top < 0) {
    top = 0;
  } else if (top > 160) {
    top = 160;
  }
  this.left = -left * 3;
  this.top = -top * 3;
},

 moveend() {
      this.bigImgUrl = "";
      this.left = 0;
      this.top = 0;
    },