原生JS制作放大镜

一、简单html页面布局
（图片使用数据库引入）

<div class="loupe">//外层大盒子
         <div class="loupe_big">//大图片盒子

         </div>
          <div class="loupe_middle">//中等图片盒子
                   <div class="loupe_shade">//阴影层

                   </div>

         </div>
         <div class="loupe_small">//小图片选项卡小盒子

         </div>
 </div>

二、css修饰

.loupe{
    width: 402px;
    height: 474px;
    border: 1px solid #b0b0b0;
    position: relative;
    z-index: 3;
}
.loupe .loupe_big{
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
    position: absolute;
    top: 0;
    left: 105%;
    overflow: hidden;
    background: #fff;
    display: none;
}
.loupe .loupe_big img{
    width: 1600px;
    height: 1600px;
    position: absolute;
    left: 0;
    top: 0;
}
.loupe .loupe_middle{
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
}
.loupe .loupe_middle .loupe_shade{
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, .3);
    position: absolute;
    z-index: 2;
    display: none;
    left: 0;
    top: 0;
}
.loupe .loupe_middle img{
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
}
.loupe .loupe_small{
    width: 400px;
    height: 52px;
    background: #ebe5e5;
    position: absolute;
    bottom: 10px;
    left: 0;
}
.loupe .loupe_small img{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-left: 25px;
    position: relative;
    border: 1x solid #ebe5e5;
}
.loupe .loupe_small .active{
    border: 1px solid #f00;
}

三、获取属性

var small = document.querySelector(".loupe_small");
var middle = document.querySelector(".loupe_middle");
var shade = document.querySelector(".loupe_middle .loupe_shade");
var big = document.querySelector(".loupe_big");
var box = document.querySelector(".loupe");

四、封装事件函数

function enlarge(){
    // 点小图换大图和中图
    var smallImgs = document.querySelectorAll(".loupe_small img");
    var that = document.querySelector(".loupe_small img.active");
    var middleImg = document.querySelector(".loupe_middle img");
    // console.log(middleImg);
    var bigImg = document.querySelector(".loupe_big img");
    for(var i=0;i<smallImgs.length;i++){
        smallImgs[i].onclick = function(){
            that.className = '';
            this.className = 'active';
            that = this;
            // 换大图和中图 - 路径和自己一样
            middleImg.src = this.src
            bigImg.src = this.src
        }
    }

    // 中盒子做鼠标移入事件 - 让遮罩显示，让大盒子显示
    middle.onmouseover = function(){
        shade.style.display = 'block';
        big.style.display = 'block';
        // 鼠标移动事件
        middle.onmousemove = function(e){
            var e = e || window.event;
            // 获取鼠标位置
            var x = e.pageX;
            var y = e.pageY;
            // 计算遮罩的位置
            var l = x - shade.offsetWidth/2 - middle.offsetLeft - box.offsetLeft - middleImg.offsetLeft;

            var t = y - shade.offsetHeight/2 - middle.offsetTop - box.offsetTop - middleImg.offsetTop;

            // 限制遮罩
            if(l<=0){
                l=0
            }
            if(t<=0){
                t = 0;
            }
            if(l>=middle.offsetWidth - shade.offsetWidth){
                l=middle.offsetWidth - shade.offsetWidth
            }
            if(t>=middle.offsetHeight - shade.offsetHeight){
                t=middle.offsetHeight - shade.offsetHeight
            }
            // 将计算好位置设置给遮罩
            shade.style.left = l + "px"
            shade.style.top = t + "px"

            // 计算比例：l/中盒子 = -大图的l/大图
            var xpercent = l/middle.offsetWidth
            var ypercent = t/middle.offsetHeight
            // console.log(xpercent,ypercent);
            // 将比例乘以大盒子的大小就是大图的l和t
            var bigl = xpercent * bigImg.offsetWidth
            var bigt = ypercent * bigImg.offsetHeight

            bigImg.style.left = -bigl + "px"
            bigImg.style.top = -bigt + "px"
        }
    }

    // middle移出
    middle.onmouseout = function(){
        shade.style.display = 'none';
        big.style.display = 'none';
        middle.onmousemove = null
    }
}

五、发送ajax获取数据，调用事件函数

$.ajax({
    url:"goods.php?id=1",
    dataType:"json",
    type:"get",
    // async:false,
    success:res=>{
        // console.log(res);
        var imgs = res.img_path.split("++++++++++");
        for(var i=0;i<imgs.length;i++){
            var img = document.createElement("img");
            img.src = imgs[i];
            if(i==0){
                img.className = 'active';
                middle.appendChild(img.cloneNode(true))
                big.appendChild(img.cloneNode(true))
            }
            small.appendChild(img)
        }

        // 加载完成后在进行放大镜
        enlarge()
    }
})