前端-简单仿京东放大（注释在代码里）

糖人爱吃糖葫芦

已于 2022-07-05 21:11:20 修改

阅读量223

点赞数

文章标签：前端 javascript html

于 2022-07-05 20:32:57 首次发布

本文链接：https://blog.csdn.net/qq_44856977/article/details/125627398

版权

效果展示：

在左侧效果图区域按下鼠标会显示黄色覆盖层与右边的放大图，移动光标黄色覆盖层跟随移动并且可以改变右侧放大的范围，松开鼠标后黄色覆盖层与右侧放大区域隐藏

实现原理（原理转载于京东放大镜效果实现 + 原理分析_卡卡西最近怎么样的博客-CSDN博客_京东放大镜效果）：

首先我们要获取到鼠标在左侧盒子内的坐标，以横坐标为例，x=光标到页面左侧距离-盒子到左侧距离，说白了就是 e.pageX - leftbox.offsetLeft，纵坐标同理。获取过后 x 与 y 得到的值减去黄色遮盖层一半的宽度得到的分别为黄色遮盖层到左侧盒子的距离，maskX=mask.offsetWidth/2，到盒子上方竖直距离同理，然后赋值给盒子的绝对位移左上边距，这里用到了子绝父相来保证遮盖层的参照系是左侧盒子。为了防止遮盖层移动超出左侧盒子，用到了if语句判断X方向与Y方向，最难的部分在于小盒子与大盒子移动的比例，我们应该得到以下公式，右侧放大区域大图片：大图片移动的距离 = 遮盖层移动的距离 * 大图片最大移动距离 / 遮盖层最大移动距离，这样就可以得到大图片移动的距离了，但要注意此处要设置和小图片相反的移动方向，故在前面加符号即可。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            margin-top: 100px;
            margin-left: 50px;
            position: relative;
            /* margin: 0 auto; */
            width: 400px;
            height: 400px;
            background-color: pink;
            border: 3px solid grey;
            background-image: url(./b3.png);
            background-repeat: no-repeat;
            background-size: cover;
            cursor: move;
        }


        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            height: 250px;
            background-color: wheat;
            opacity: 0.6;

        }

        .content {
            display: none;
            position: absolute;
            overflow: hidden;
            top: -3px;
            left: 100%;
            width: 500px;
            height: 500px;
            border: 3px solid gray;
        }

        .content img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="mask"></div>
        <div class="content">
            <img src="./b3.png" alt="">
        </div>
    </div>
    <script>
        var box = document.querySelector('.box');
        var mask = document.querySelector('.mask');
        var content = document.querySelector('.content');
        // 1、当鼠标经过box时就现实黄色遮盖膜和大盒子里的内容
        box.addEventListener('mousemove', function (e) {
            console.log('鼠标在小盒子内部...');
            mask.style.display = 'block';
            content.style.display = 'block';
            // 3、实现鼠标黄色遮盖模随着鼠标移动
            // 返回鼠标的在小盒子中的坐标
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            console.log('鼠标在小盒子中的坐标(' + x + 'px,' + y + 'px)');
            // 改变黄色遮盖膜的左边距和上边距
            mask.style.left = x - mask.offsetWidth / 2 + 'px';
            mask.style.top = y - mask.offsetHeight / 2 + 'px';
            console.log('黄色遮盖膜距离左边界和上边界的距离:(' + mask.offsetLeft + 'px,' + mask.offsetTop + 'px)');
            // 当黄色遮盖膜到达小盒子的边界时停止移动
            if (mask.offsetLeft < 0) {
                mask.style.left = 0 + 'px';
            }
            if (mask.offsetLeft > box.offsetWidth - mask.offsetWidth - 3) {
                mask.style.left = box.offsetWidth - mask.offsetWidth - 3 + 'px';
            }
            if (mask.offsetTop < 0) {
                mask.style.top = 0 + 'px';
            }
            if (mask.offsetTop > box.offsetHeight - mask.offsetHeight - 3) {
                mask.style.top = box.offsetHeight - mask.offsetHeight - 3 + 'px';
            }
            // 4.啥也没有就是在大盒子里显示大图片
            // 重点来了！
            // 我的鼠标所跟随的黄色遮盖膜在小盒子里移动，然后大盒子里的图片也在移动，只不过方向相反而已，另外大盒子的左边距就是小盒子的边长。
            // 大盒子移动距离如下：
            var img = document.querySelector('img');
            img.style.left = -(content.offsetWidth * mask.offsetLeft) / mask.offsetWidth + 'px';
            img.style.top = -(content.offsetHeight * mask.offsetTop) / mask.offsetHeight + 'px';
        })
        // 2、当鼠标离开box时就隐藏出现的内容
        box.addEventListener('mouseout', function (e) {
            console.log('鼠标已经离开了盒子！');
            mask.style.display = 'none';
            content.style.display = 'none';

        })




    </script>



</body>

</html>