【JS实现】京东商品放大镜

效果

CSS

 <style>
        .box {
            position: relative;
            width: 450px;
            height: 450px;
            background-color: pink;
            border: 1px solid #ccc;
            margin: 100px;
        }
        .od {
            width: 450px;
            height: 450px;
        }
        .div {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: #f1ec3b;
            opacity: .5;
            cursor: move;
        }
        .big {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 540px;
            height: 540px;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        .bigImg {
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>

HTML

 <div class="box">
        <img src="https://img.codestu.cn/2021/08/27/b0c318a15b705.jpg" alt="" class="od">
        <div class="big">
            <img src="https://img.codestu.cn/2021/08/27/5abe9570d52cd.jpg" alt="" class="bigImg">
        </div>
        <div class="div"></div>
    </div>

JS

<script>
        var box = document.querySelector('.box');
        var big = document.querySelector('.big');
        var div = document.querySelector('.div');
        var bigImg = document.querySelector('.bigImg');
        box.addEventListener('mousemove', function(e) {
            div.style.display = 'block';
            big.style.display = 'block';
            // 鼠标坐标减去盒子的坐标等于鼠标相对盒子的坐标
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            // 最大移动距离
            var maxImg = box.offsetWidth - div.offsetWidth;
            // 将鼠标坐标改为黄色盒子的中心部位
            var bigX = x - div.offsetWidth / 2;
            var bigY = y - div.offsetHeight / 2;
            // 放大镜的最大移动距离
            var bigIMg = bigImg.offsetWidth - big.offsetWidth;
            // 放大后的距离
            var bigImgX = bigX * bigIMg / maxImg;
            var bigImgY = bigY * bigIMg / maxImg;
            // 边距判断，防止遮目层超出父盒子范围
            if (bigX <= 0) {
                bigX = 0;
            } else if (bigX >= maxImg) {
                bigX = maxImg; 
            }
            if (bigY <= 0) {
                bigY = 0;
            } else if (bigY >= maxImg) {
                bigY = maxImg; 
            }
            // 记住要加单位
            div.style.left = bigX + 'px';
            div.style.top = bigY + 'px';
            bigImg.style.left = -bigImgX +'px';
            bigImg.style.top = -bigImgY +'px';
        })
        box.addEventListener('mouseout', function() {
            big.style.display = 'none';
            div.style.display = 'none';

        })
    </script>