本篇主要介绍了web前端高级JS实战 - 仿京东商品图放大镜效果，通过具体的内容展现，希望对大家web前端JavaScript的学习有一定的帮助。

1.结构功能分析

1.1 结构分析图

整个案例可以分为三个功能模块

鼠标经过小图片盒子， 遮挡层盒子 和 大图片盒子显示，离开隐藏2个盒子功能

黄色的遮挡层跟随鼠标移动功能。

移动黄色遮挡层，大图片跟随移动功能。

 1.2 HTML和CSS代码展示

    <div class="minBox">

        <img src="images/bbd.jpg" alt="武魂殿女王" id="minImg">

        <div class="mask"></div>

        <div class="maxBox">

            <img src="images/bbdbig.jpg" alt="" id="maxImg">

        </div>

    </div>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .minBox {

            position: relative;

            left: 200px;

            top: 50px;

            width: 300px;

            height: 257px;

        }

        .mask {

            /* 先隐藏遮罩层mask */

            display: none;

            position: absolute;

            top: 0;

            left: 0;

            width: 200px;

            height: 200px;

            background: rgba(248, 215, 125, 0.3);

            /* 鼠标移动 移动图标 */

            cursor: move;

            border: 1px solid rgb(248, 215, 125);

        }

        .maxBox {

            /* 先隐藏大图片盒子maxBox */ 

            display: none;

            position: absolute;

            top: 0;

            left: 340px;

            width: 600px;

            height: 427px;

            border: 1px solid #ccc;

            overflow: hidden;

        }

        .maxBox img {

            position: absolute;

            top: 0;

            left: 0;

        }

    </style>

2.JS分析+代码

2.1 当鼠标经过/离开，mask显示/隐藏，大图片盒子显示/隐藏

    //先获取我们需要用到得到元素

    var minBox = document.querySelector('.minBox');

    var mask = document.querySelector('.mask');

    var maxBox = document.querySelector('.maxBox');

    //鼠标经过事件 mouseover   隐藏 none  显示  block 

    minBox.addEventListener('mouseover', function () {

        mask.style.display = 'block';

        maxBox.style.display = 'block';

    })

    //鼠标离开事件 mouseout

    minBox.addEventListener('mouseout', function () {

        mask.style.display = 'none';

        maxBox.style.display = 'none';

    })

2.2 遮罩层跟随鼠标移动

（1）先计算出鼠标在盒子内的坐标

    var x = e.pageX - this.offsetLeft;

    var y = e.pageY - this.offsetTop;

（2）把计算好的左边赋值给遮罩层

    var maskX = x - mask.offsetWidth / 2;

    var maskY = y - mask.offsetHeight / 2;

（3）x坐标小于0 让他停在0的位置；x大于最大移动宽度，停在最大移动宽度的位置

          ！！！！ 最大移动宽度和高度 = minBox的宽度/高度-mask的宽度/高度

    var maxMoveWidth = minBox.offsetWidth - mask.offsetWidth;

    var maxMoveHeigh = minBox.offsetHeight - mask.offsetHeight;

    //if判断遮罩层移动不超过小图片盒子边框

    //mask 移动的距离  x轴  

    if (maskX <= 0) {

         maskX = 0;

    } else if (maskX >= maxMoveWidth) {

         maskX = maxMoveWidth;

    }

    //mask 移动的距离  x轴

    if (maskY <= 0) {

         maskY = 0;

    } else if (maskY >= maxMoveHeigh) {

         maskY = maxMoveHeigh;

    }

    mask.style.left = maskX + 'px';

    mask.style.top = maskY + 'px';

2.3 移动遮罩层，大图片跟着移动

        ！！！！大图片移动距离=（遮罩层移动距离  X 大图片最大移动距离）/ 遮罩层最大移动距离

    var maxImg = document.querySelector('#maxImg');

    //大图片最大移动距离

    var maxBigMoveX = maxImg.offsetWidth - maxBox.offsetWidth;

    var maxBigMoveY = maxImg.offsetHeight - maxBox.offsetHeight;

    var bigMoveX = maskX * maxBigMoveX / maxMoveWidth;

    var bigMoveY = maskY * maxBigMoveY / maxMoveHeigh;

    maxImg.style.left = -bigMoveX + 'px';

    maxImg.style.top = -bigMoveY + 'px';

3.最终效果图

✅  扫码免费获取IT基础课程 · IT技术干货 · 答疑解惑 · 职业测评