效果图

各部分代码

HTML部分

<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>
            <!--鼠标放大镜模块-->
            <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>

CSS部分

#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{
          
   
/*CSS3给盒子:hover添加border时，盒子发生抖动的解决方案之一: 给盒子设置初始透明边框*/
  display: block;
  float: left;
  height: 54px;
  width: 54px;
  margin-left: 15px;
  border: 2px solid transparent
}
.imgNow li:hover, #sign{
          
   
  border: 2px solid red;
}

#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;
}

#seeDetail img{
          
   
  position: absolute;
  /*这里注意下，初始时候将查看框内待放大图的左上角定位与查看框的左顶点处，也即其定位原点处*/
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  
  /*我自己的图片设置的宽高是450×450，所以这里放大部分的图片的宽高设置为原图的四倍*/
  /*这个倍数需要注意，后面进行坐标变换的时候要用上*/
  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: 454px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

js部分

总结

放大镜功能的核心实现思路就是两张图，一大一小，计算光标预览区域左上角的坐标，然后根据两张图所在div的对应宽高比，等比反方向移动大图，溢出部分设置overflow: hidden，从而实现放大镜的效果

需要的知识点：

在css3的实现方法中，可以使用transform: translate()，来设置图片的移动，此外还可以使用js获取标签进行对应属性的更改。 这里面主要是对pageX、pageY、offsetX、offsetY、offsetLeft、offsetTop、clientX、clientY等的区分使用