我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

大家好，我是木瓜。

今天闲来无事(摆烂ing😂😂)逛了会京东,琳琅满目的商品让我应接不暇😊😊，可是拍了拍自己空空的口袋，暗自叹气😭😭。不行，得起来学习，不学习就没饭吃！！！决定了，今天看到京东的商品放大镜功能很有趣，就来学习一下这个原理，自己尝试着学习实现一下。

代码效果

code.juejin.cn/pen/7143237… 效果预览图

基本功能

鼠标经过小图片盒子，黄色的放大镜和放大图片盒子显示
鼠标离开隐藏黄色的放大镜和放大图片盒子

整体结构与实现

HTML结构

 <div class="box">
        <img src="https://img14.360buyimg.com/n1/jfs/t1/219489/5/15051/394455/6232f99eE2bd18f28/e8dc9cb55294b5da.jpg.avif" alt="" class="simg">
        <div class="mask"></div>
        <div class="bigMask"><img src="https://img14.360buyimg.com/n0/jfs/t1/181864/13/23729/571512/62679fdcE5f6e4e13/72f1a9f19bd1f8ac.jpg.avif" alt="" class="bimg"></div>
    </div>

👍准备两个大小一样的div盒子，一个放在左边（商品小图片+放大镜),一个放在右边（商品放大图片)
👍HTML布局结构的方式其实是有多种多样的，这里只是提供一个思路，不再赘述

CSS结构

  * {
        padding: 0;
        margin: 0;
    }
    
    .box {
        position: relative;
        height: 450px;
        width: 450px;
        border: 1px solid #ccc;
    }
    
    .box .simg {
        /*position: absolute;*/
        /*height: 200px;
        width: 200px;*/
    }
    
    .box .mask {
        display: none;
        height: 200px;
        width: 200px;
        top: 0;
        left: 0;
        background-color: yellowgreen;
        position: absolute;
        opacity: .5;
    }
    
    .bigMask {
        display: none;
        left: 460px;
        top: 0;
        width: 500px;
        height: 500px;
        border: 1px solid #ccc;
        position: absolute;
        background-color: pink;
        overflow: hidden;
    }
    
    .bigMask .bimg {
        position: absolute;
        /*height: 300px;
        width: 300px;*/
        z-index: 9999;
    }

🙃CSS部分就按照自己的想法思路写写就可以
值得注意的是，鼠标移入小图片,放大镜和大图片display:block,移除则为dispaly:none
图片盒子通过绝对定位在一起，其余都是简单的css样式，这里不再描述

JS部分--功能实现

1. 定义变量，获取dom元素

        //获取遮挡框和放大镜的元素
        var box = document.querySelector('.box');
        var bigMask = document.querySelector('.bigMask');
        var mask = document.querySelector('.mask');
        var bimg = document.querySelector('.bimg');

2.添加事件，实现遮罩层和大图片的显示控制

        //添加事件鼠标在box盒子上时，显示遮挡框和放大镜的元素
        //添加事件鼠标离开box盒子上时，隐藏遮挡框和放大镜的元素
        box.addEventListener('mouseover', function() {
            bigMask.style.display = 'block';
            mask.style.display = 'block';
        });
        box.addEventListener('mouseout', function() {
            bigMask.style.display = 'none';
            mask.style.display = 'none';
        });

需要注意的是，鼠标移入移除的事件分别为mouseover mouseout

3. 坐标移动，遮挡层跟随鼠标功能

        //遮挡框的元素跟随鼠标移动
        box.addEventListener('mousemove', move);
        //让鼠标的中心停在遮挡框中心
        function move(e) {
            var x = e.pageX - box.offsetLeft - mask.offsetWidth / 2;
            var y = e.pageY - box.offsetTop - mask.offsetHeight / 2;
            //console.log(x, y);
            //将遮挡框固定在box里
            var maxX = box.offsetWidth - mask.offsetWidth;
            var maxY = box.offsetHeight - mask.offsetHeight;
            if (x <= 0) {
                x = 0;
            } else if (x >= maxX) {
                x = maxX;
            }
            if (y <= 0) {
                y = 0;
            } else if (y >= maxY) {
                y = maxY;
            }
            mask.style.left = x + 'px';
            mask.style.top = y + 'px';
           
        }

获取鼠标在盒子中的坐标；
通过计算鼠标与盒子偏移的距离让鼠标处于遮挡层中间
定义鼠标移动事件move,在小图片盒子内移动；

需要注意的是:

遮挡层不能超出小图片盒子的范围；
如果遮挡层的坐标小于0，就把坐标设置为0；
如果遮挡层的最大距离大于max,就把坐标设置为最大的移动距离即小图片盒子宽度减去遮挡层盒子宽度

4.移动遮挡层，大图片成比例跟随移动

             //大盒子图片与遮挡层成比例移动
            var bigX = bimg.offsetWidth - bigMask.offsetWidth;
            var bigY = bimg.offsetHeight - bigMask.offsetHeight;
            var moveX = x * bigX / maxX;
            var moveY = y * bigY / maxY;
            //console.log(moveX, moveY);
            // console.log(x, y);
            bimg.style.left = -moveX + 'px';
            bimg.style.top = -moveY + 'px';

结语

🤔🤔这里就是京东放大镜的简易实现，大致原理也已经叙述。技术不精，如果其中有错误希望各位大佬指教。最后再说一句,茄皇yyds！！！👍👍

😀JS仿京东放大镜

前言

代码效果

基本功能

整体结构与实现

结语