商品图片放大镜的JavaScript实现

浅浅的花香味﹌ 2022-05-27 03:06 377阅读 0赞

**html代码**

**css代码**

* {
                margin: 0;
                padding: 0;
            }
    
            #content {
                position: relative;
            }
    
            #box {
                width: 400px;
                height: 400px;
                border: 1px solid #000;
                position: relative;
            }
    
            #box > img {
                width: 400px;
                height: 400px;
            }
    
            #filter {
                width: 200px;
                height: 200px;
                background: #000;
                opacity: 0.6;
                position: absolute;
                left: 0;
                top: 0;
                display: none;
                cursor: move;
            }
    
            .small {
                margin: 0 10px;
                border: 1px solid #fff;
            }
    
            .small:hover {
                border-color: #000;
            }
    
            #max {
                position: absolute;
                left: 430px;
                top: 0;
                width: 400px;
                height: 400px;
                overflow: hidden;
            }
    
            #maxImg {
                width: 800px;
                height: 800px;
                position: absolute;
                left: 0;
                top: 0;
            }

**JS代码**

/*
            建议 小方块 中图  以及大图的比例是 1:2:4
         */
        var aSmall = document.querySelectorAll(".small");
        var omiddle = document.querySelector(".middle");
    
        var oBox = document.getElementById("box");
        var oFilter = document.getElementById("filter");
        var maxImg = document.getElementById("maxImg");
        for (var i = 0; i < aSmall.length; i++) {
            aSmall[i].onmouseover = function () {
                var src = this.getAttribute("data-url");
                omiddle.src = src;
                maxImg.src = src;
            }
        }
    
        /放大镜//
        maxImg.style.display = "none";
        oBox.onmouseover = function () {
            maxImg.style.display = "block";
            oFilter.style.display = "block";
            this.onmousemove = function (e) {
                var e = e || event;
                var l = e.clientX - oFilter.offsetWidth / 2;
                var t = e.clientY - oFilter.offsetHeight / 2;
                
                l = l >= oBox.offsetWidth - oFilter.offsetWidth ? l = oBox.offsetWidth - oFilter.offsetWidth : (l <= 0 ? l = 0 : l = l);
                t = t >= oBox.offsetHeight - oFilter.offsetHeight ? t = oBox.offsetHeight - oFilter.offsetHeight : (t <= 0 ? t = 0 : t = t);
    
                oFilter.style.left = l + 'px';
                oFilter.style.top = t + 'px';
    
                maxImg.style.left = -2 * l + 'px';
                maxImg.style.top = -2 * t + 'px';
            }
        };
        oBox.onmouseout = function () {
            oFilter.style.display = "none";
            maxImg.style.display = "none";
        }