从零到一学JS：写个图片放大镜，仿JD商品放大镜

每日一kun：你无法叫醒一个，不回你消息的人，但是红包能。

一天不写JS，浑身难受，今天玩个放大镜，JS代码不难，主要难的就是怎么算距离，和等比例显示放大后的图片，话不多说，上代码。

js代码
        var min = document.querySelector(".min")
        var max = document.querySelector(".max")
        var mask = document.querySelector(".mask")
        var img = document.querySelectorAll("img")
        min.addEventListener("mouseover", function () {
            mask.style.display = "block"
            max.style.display = "block"
            min.addEventListener("mousemove", function (e) {

                mask.style.left = e.pageX - min.offsetLeft - mask.offsetWidth / 2 + "px"
                mask.style.top = e.pageY - min.offsetTop - mask.offsetHeight / 2 + "px"
                img[1].style.left = -(e.pageX - min.offsetLeft - mask.offsetWidth / 2) * (img[1].offsetWidth - max.offsetWidth) / (min.offsetWidth - mask.offsetWidth) + "px"
                img[1].style.top = -(e.pageY - min.offsetTop - mask.offsetHeight / 2) * (img[1].offsetHeight - max.offsetHeight) / (min.offsetHeight - mask.offsetHeight) + "px"
                if (mask.offsetLeft <= 0) {
                    mask.style.left = "0px"
                } else if (mask.offsetLeft > (min.offsetWidth - mask.offsetWidth)) {
                    mask.style.left = min.offsetWidth - mask.offsetWidth + "px"
                }
                if (mask.offsetTop < 0) {
                    mask.style.top = "0px"
                } else if (mask.offsetTop >= (min.offsetHeight - mask.offsetHeight)) {
                    mask.style.top = min.offsetHeight - mask.offsetHeight + "px"
                }

            })
        })
        min.addEventListener("mouseout", function () {
            mask.style.display = "none"
            max.style.display = "none"
        })
html代码
<div class="'main">
    <div class="min">
        <img src="./image/760b022fa6c40664.jpg.avif">
        <div class="mask">

        </div>
    </div>
    <div class="max">
        <img src="./image/760b022fa6c40664.jpg(4).avif">
    </div>
</div>
css代码
    .main{
        position: relative;
    }
    .min{
       position: absolute;
       left: 200px;
       top: 100px;
       cursor: move;
    }
    .mask{
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: yellowgreen;
        top: 0;
        left: 0;
        opacity: 0.5;
        display: none;
    }
    .max{
        position: absolute;
        left: 650px;
        width: 500px;
        height: 500px;
        overflow: hidden;
        display: none;
       top: 100px;
    }
    .max img{
        position: absolute;
        

    }

核心算法就是，小图片移动的距离/小图片最大移动距离 = 大图片移动的距离/大图片最大移动距离，由上可得，大图片移动的距离=小图片移动的距离*大图片最大移动距离/小图片最大移动距离，上面的算法小图片移动的距离，大图片最大移动距离，小图片最大移动距离都可以通过JS方法算出来。

图片可以自己换个，找两个图片，一个大一个小。

结果

Bug：刚开始有个小bug左右移动正常，当上下移动到边界时遮罩层就会抖动，找了半天才发现是if判断问题，刚开始是以为js if不能写超过else if ，因为我把第二个else if 改成if 放大镜就能正常显示了，后来百度说JS可以嵌套7层，所以应该不是这个问题，后来想了想，问题应该是if里面的判断条件不能出现另一个，你一个if判断mask.offsetLeft就不能在这个if下面的else if判断mask.offsetTop，虽然不会报错，但会让遮罩层从上面出去。