Vue Part Six: Image Magnifying Glass Function of E-commerce Website

Reference for this article: https://blog.csdn.net/liushi21/article/details/127497487

The effect is as follows:

 

The function implementation is broken down as follows:

(1) Commodity map area: mainly for browsing pictures and displaying pictures according to the url of the pictures. The "magnifying glass area" does not need to be displayed when the mouse leaves this area.

(2) The mouse zooms in on the block. It mainly deals with two things:

1) mouseenter: When the mouse enters, the magnifying glass area displays pictures according to the url

2) mousemove: When the mouse moves, the mask block area of ​​the mouse moves along with it, and at the same time the picture in the magnifying glass area switches accordingly (displaying the magnification effect of the mask block)

(3) Product map overview: When the mouse is over, switch the url image in the product map area.

 How to achieve the zoom effect:

It is mainly realized through the translate method of CSS.

There is actually a large picture in the magnifying glass area. When the mouse moves in the product picture area, the big picture in the magnifying glass area moves towards each other.

code:

1. css code:

#page{
    position: relative;
    height: 700px;
    width: 1246px;
    left: 19.3%;
    top: 111px;
    background-color: aqua;
}

/* 商品图 */
#goodsPics{
    width: 452px;
    height: 626px;
    background-color: blue;
    position: relative;
    top: 10px;
}

/*当前所查看的图片，也即所需要局部放大查看的图片*/
.imgNow{
    position: relative;
    top: 15px;
    left: 37px;
}

.imgNow li{
    display: block;
    float: left;
    height: 54px;
    width: 54px;
    margin-left: 15px;
    border: 2px solid transparent;
}

.imgNow li:hover, #sign{
    border: 2px solid red;
}

/* 图片放大后的div区块 */
#seeDetail{
    position: absolute;
    background-color: aliceblue;
    width: 600px;
    height: 600px;
    top: 0%;
    left: 101%;
    overflow: hidden;
    border: 2px solid #f90;
    background-position: 0 0;
    background-repeat: no-repeat;
}

/* 图片放大后的div区块下的img区块 */
#seeDetail img{
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    width: 1800px;
    height: 1800px;
}

/* 鼠标查看区域 */
.move{
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 150px;
    cursor: move;
    background: rgba(142, 223, 255, 0.407);
}

/* 覆盖在放大图的原图表面上的一个遮罩层 */
.topMask{
    width: 452px;
    height: 452px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

2, home.vue code:

<script>
  export default{
    data(){
      return{
        url: require('@/assets/images/01.jpg'),
        Bigurl: require('@/assets/images/01.jpg'),
        urlIndex: -1, //urlIndex用于图片列表中
        isShow: 0,
        cursorMask: {transform: ''},
        imgMove: {transform: ''},
        goodsImgs: [
          {
            id:0,
            src: require('@/assets/images/01.jpg')
          },{
            id:1,
            src: require('@/assets/images/02.jpg')
          },{
            id:2,
            src: require('@/assets/images/03.jpg')
          }
        ]
      }
    },

    methods: {
      seeThis(index){
        this.url = this.goodsImgs[index].src;
        this.urlIndex = index;
      },
      move(e){
        var x = e.offsetX - 75;
        var y = e.offsetY - 75;

        // 防止鼠标预览区域移动到原图区域左边以外
        if(x < 0){
          x = 0;
        }else if(x > 300){
          // 防止预览区域移动到右边以外
          x = 300;
        }

        if(y < 0){
          y = 0;
        }else if(y > 300){
          y = 300;
        }

        this.cursorMask.transform = `translate(${x}px, ${y}px)`;
        this.imgMove.transform = `translate(-${4*x}px, -${4*y}px)`;
      },
      seeBegin(){
        this.Bigurl = this.url;
        this.isShow = 1;
      },
      seeEnd(){
        this.Bigurl = "";
        this.left = 0;
        this.top = 0;
        this.isShow = 0;
      }
    }
  }
</script>

<template>
  <div id="goodsPics">
    <!-- 当前查看商品图区域 -->
    <div id="imgPre" style="position: relative;" @mouseleave="seeEnd">
      <div ref="imgPre">
        <img :src="url" alt="picNow">
      </div>

      <div class="topMask" @mouseenter="seeBegin($event)" @mousemove="move($event)">
        <!-- 鼠标放大镜模块 -->
        <div ref="move" v-show="isShow" class="move" :style="cursorMask">
        </div>
      </div>

      <!-- 商品图总览，就是一排的小图 -->
      <ul class="imgNow">
        <li v-for="(item, index) in goodsImgs" :key="item.id" @mouseover="seeThis(index)" :id="urlIndex == index ? sign : ''">
          <img style="width: 54px; height: 54px;" :src="item.src" alt="pics">
        </li>
      </ul>

      <!-- 放大镜区域，查看商品图放大后的效果 -->
      <div v-if="isShow" id="seeDetail" ref="bigImg">
        <img :src="Bigurl" alt="" :style="imgMove">
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>