电商商品详情页面图片展示效果

最新推荐文章于 2024-09-05 10:45:30 发布

踢足球的，程序猿

最新推荐文章于 2024-09-05 10:45:30 发布

阅读量386

点赞数

本文链接：https://blog.csdn.net/weixin_52630329/article/details/118093095

版权

ZoomImg.vue代码如下：

  <div>
    <div
      ref="img_box"
      class="img_box"
      @mousemove="move"
      @mouseover="flag = true"
      @mouseout="flag = false"
    >
      <!-- 原始图片400*400 -->
      <img :src="currentImage" alt="" />
      <!-- 大图div480*480 -->
      <div class="big_img_box" v-show="flag">
        <!-- 大图 800*800 -->
        <img
          :src="currentImage"
          alt=""
          :style="{ left: bigLeft + 'px', top: bigTop + 'px' }"
        />
      </div>
      <!-- 260*260 -->
      <div
        class="mask"
        :style="{ left: left + 'px', top: top + 'px' }"
        v-show="flag"
      ></div>
    </div>

    <!-- 五张小图片 -->
    <div class="samll_img">
      <img
        :src="item"
        alt=""
        v-for="(item, i) in imgs"
        v-if="i > 0"
        :key="item"
        :class="item == currentImage ? 'active' : ''"
        @click="currentImage = item"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: ["imgs"],
  data() {
    return {
      flag: false,
      currentImage: this.imgs[0],
      // 遮罩层的位置
      left: 0,
      top: 0,
      bigLeft: 0,
      bigTop: 0,
    };
  },
  created() {
    console.log(this.imgs[0]);
  },
  watch: {
    imgs(newValue) {
      this.currentImage = newValue[0];
    },
  },
  // computed:{
  //     newArr(){
  //         // return this.imgs.splice(0,1)
  //         return this.imgs.filter((e,i)=>{
  //             return i>0
  //         })
  //     }
  // }
  methods: {
    move(e) {
      // 获取鼠标点距离浏览器边的距离
      var x = e.pageX;
      var y = e.pageY;

      // |获取img_box的div距离边上的距离
      var divX = this.$refs.img_box.offsetLeft;
      var divY = this.$refs.img_box.offsetTop;

      // 鼠标的点相对于img_box的div的位置
      x = x - divX;
      y = y - divY;

      // 遮罩层中心点的位置坐标的范围
      // 130<x<270
      // 130<y<270
      x = x > 270 ? 270 : x;
      x = x < 130 ? 130 : x;
      y = y > 270 ? 270 : y;
      y = y < 130 ? 130 : y;

      // 遮罩层的left top值
      this.left = x - 130;
      this.top = y - 130;

      // 大图的left和top值
      this.bigTop = -y * 2 + 240;
      this.bigLeft = -x * 2 + 240;
    },
  },
};
</script>

<style scoped>
.img_box {
  width: 400px;
  /* height: 400px; */
  position: relative;
  cursor: crosshair;
}
.img_box img {
  width: 100%;
  border-radius: 10px;
}
.big_img_box {
  position: absolute;
  left: 420px;
  top: 0;
  /* border:1px solid red; */
  width: 480px;
  height: 480px;
  overflow: hidden;
  z-index: 100;
}
.big_img_box img {
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
}
.mask {
  width: 260px;
  height: 260px;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.2);
}
.samll_img img {
  float: left;
  width: 80px;
  border: 2px solid white;
  box-sizing: border-box;
}
.samll_img .active {
  border: 2px red solid;
}
</style>