原生js实现京东商品详情页放大镜效果

html代码

<div id="box">
            <div id="smallbox">
                <img src="images/magnifying1.png" alt="">
                <span id="mask"></span>
            </div>
            <div id="bigbox">
                <img src="images/magnifying1.png" alt="" style="position: absolute;left:0;top:0;">
            </div>
        </div>
        <div id="list">
            <img src="images/magnifying1.png" alt="">
            <img src="images/magnifying2.png" alt="">
        </div>

css代码

* {
                margin: 0;
                padding: 0;
                border: none;
            }

            img {
                vertical-align: top;
            }

            #list img {
                width: 50px;
                height: 50px;
                margin: 5px;
            }

            #smallbox img {
                width: 350px;
                height: 350px;

            }

            #bigbox img {
                width: 800px;
                height: 800px;
            }

            #box {
                width: 350px;
                height: 350px;
                background-color: red;
                margin: 100px 0 0 100px;
                position: relative;
            }

            #smallbox {
                width: 100%;
                height: 100%;
                border: 1px solid #ccc;
                position: relative;
            }

            #smallbox img {
                width: 350px;
                height: 350px;
            }

            #mask {
                width: 100px;
                height: 100px;
                background-color: rgba(255, 255, 0, 0.4);
                position: absolute;
                left: 0;
                top: 0;
                cursor: move;
                display: none;
            }

            #bigbox {
                width: 600px;
                height: 600px;
                border: 1px solid #ccc;
                overflow: hidden;
                position: absolute;
                left: 360px;
                top: 0;
                display: none;
            }

            #list {
                margin: 20px 0 0 100px;
            }

js代码

var box = document.getElementById("box");
            var smallbox = box.children[0];
            var bigbox = box.children[1];
            var mask = smallbox.children[1];
            var bigimg = bigbox.children[0];
            var listimg = document.querySelectorAll("#list img");
            console.log(listimg)
            // 监听鼠标进入小盒子
            smallbox.addEventListener('mouseover', function() {
                mask.style.display = "block";
                bigbox.style.display = "block";

                smallbox.addEventListener('mousemove', function(e) {
                    var e = e || window.event;
                    // 求鼠标的坐标
                    var pointX = e.pageX - box.offsetLeft - mask.offsetWidth * 0.5;
                    var pointY = e.pageY - box.offsetTop - mask.offsetHeight * 0.5;
                    
                    // 边检测
                    if (pointX < 0) {
                        pointX = 0
                    } else if (pointX >= smallbox.offsetWidth - mask.offsetWidth) {
                        // pointX最大是250
                        pointX = smallbox.offsetWidth - mask.offsetWidth
                    }
                    if (pointY < 0) {
                        pointY = 0;
                    } else if (pointY >= smallbox.offsetWidth - mask.offsetWidth) {
                        pointY = smallbox.offsetWidth - mask.offsetWidth
                    }
                    // 让盒子移动
                    mask.style.left = pointX + 'px';
                    mask.style.top = pointY + 'px';

                    bigimg.style.left = -pointX / (smallbox.offsetWidth / bigbox.offsetWidth) + "px";
                    bigimg.style.top = -pointY / (smallbox.offsetHeight / bigbox.offsetHeight) + "px";
                })
            })
            
            // 监听鼠标离开小盒子
            smallbox.addEventListener('mouseout',function(){
                mask.style.display = "none";
                bigbox.style.display = "none";
            })
            
            // 切换图片
            for(var i=0;i<listimg.length;i++){
                var img=listimg[i];
                (function(i){
                    img.onmouseenter=function(){
                        smallbox.children[0].src="images/magnifying"+(i+1)+".png";
                        bigimg.src="images/magnifying"+(i+1)+".png";
                    }
                    
                })(i)
            }