html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>放大镜</title>
  8.     <style>
  9.         .lit_box,.big_box{
  10.             width:400px;
  11.             height: 400px;
  12.             position: relative;
  13.             overflow: hidden;
  14.             border:1px solid rgb(219, 219, 219);
  15.             float: left;
  16.         }
  17.         .lit_box img{
  18.             width: 100%;
  19.             height: 100%;
  20.         }
  22.         .big_box {
  23.             display: none;
  24.         }
  25.         .big_box img{
  26.             width: 200%;
  27.             height: 200%;
  28.             position: relative;
  29.             left: 0;
  30.             top: 0;
  31.         }
  32.         .mask{
  33.             width: 200px;
  34.             height: 200px;
  35.             background-color: rgba(230, 190, 14, 0.445);
  36.             position:absolute;
  37.             top: 0;
  38.             left: 0;
  39.             display: none;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <!-- 原图片展示 -->
  45.     <div class="lit_box">
  46.         <img src="img.jpg" alt="">
  47.         <!-- 蒙层 -->
  48.         <div class="mask">
  50.         </div>
  51.     </div>
  52.     <!-- 放大后的图片 -->
  53.     <div class="big_box">
  54.         <img src="./img1.jpg" alt="">
  55.     </div>
  56. </body>
  57. </html>

JS

  // 获取所有操作的元素
    let listBox=document.querySelector('.lit_box'),
        mask=document.querySelector('.mask'),
        bigBox =document.querySelector('.big_box'),
        bigImg=bigBox.querySelector('img');
    // 鼠标移入时展示隐藏内容
    listBox.onmouseenter=function(e){
        mask.style.display='block';
        bigBox.style.display='block';
    }

    //鼠标在元素上的时候 
    listBox.onmousemove=function(e){
        let x=e.pageX-this.offsetLeft;
        let y=e.pageY-this.offsetTop;

        // 获取蒙层最大的偏移量
        let maskMax=this.offsetWidth-mask.offsetWidth;
        // 获取一下大图的偏移量
        let bigImgMax=bigImg.offsetWidth-bigBox.offsetWidth;
        // 获取蒙层的偏移量，使鼠标在蒙层的最中央
        let maskX=x-mask.offsetWidth/2;
        let maskY=y-mask.offsetHeight/2;

        // 获取大图 移动的位置
        // 大图的横坐标=蒙层的横坐标 * 大图片的最大偏移量/蒙层的最大偏移量
        let bigImgX=maskX*(bigImgMax/maskMax),
            bigImgY=maskY*(bigImgMax/maskMax);

        bigImg.style.left=-bigImgX+'px';
        bigImg.style.top=-bigImgY+'px';

        //横坐标边界
        if(maskX<=0){
            maskX=0;
        }else if(maskX>=maskMax){
            maskX=maskMax;
        }

        //纵左边边界
        if(maskY<=0){
            maskY=0;
        }else if(maskY>=maskMax){
            maskY=maskMax;
        }

        //处理蒙层移动
        mask.style.left=maskX+'px';
        mask.style.top=maskY+'px';

    }

    //鼠标移出时隐藏内容
    listBox.onmouseleave=function(e){
        mask.style.display='none';
        bigBox.style.display='none';
    }