商品图片放大镜的JavaScript实现

html代码

<div id="content">
    <div id="box">
        <img src="imgs/1-large.jpg" class="middle">
        <div id="filter"></div>
    </div>
    <div id="max">
        <img src="imgs/1-large.jpg" id="maxImg">
    </div>
    <div>
        <img src="imgs/1-small.jpg" class="small" data-url="imgs/1-large.jpg">
        <img src="imgs/2-small.jpg" class="small" data-url="imgs/2-large.jpg">
        <img src="imgs/3-small.jpg" class="small" data-url="imgs/3-large.jpg">
        <img src="imgs/4-small.jpg" class="small" data-url="imgs/4-large.jpg">
        <img src="imgs/5-small.jpg" class="small" data-url="imgs/5-large.jpg">
    </div>
</div>

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";
    }