一、基本流程

创建左右盒子分别包含左右图片,左盒内含遮罩加图片,右图与左图宽高比等同于右盒与遮罩的宽高比
应用事件: 鼠标移入事件(onmouseover) 鼠标移入事件(onmouseout) 鼠标移动事件(onmousemove)
左边盒子移入时,显示右边盒子,显示右边图片
左边盒子移出时,隐藏右边盒子,隐藏右边图片
左边盒子移动时通过当前位置位于盒子的距离依据公式计算出对应比例,显示右图图片位置

二、代码注释详解

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .box {
        display: flex;
        margin: 200px 0 0 200px;

    }

    .leftBox img {
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
    }

    /* 右图与左图宽高比 等同于 右盒与遮罩的比例 */
    .rightBox {
        width: 320px;
        height: 320px;
        overflow: hidden;
        position: relative;
        margin-left: 100px;
    }

    /* 右图与左图宽高比 等同于 右盒与遮罩的比例 */
    .rightBox img {
        width: 800px;
        height: 800px;
        display: none;
        position: absolute;
    }

    /* 右图与左图宽高比 等同于 右盒与遮罩的比例 */
    .leftBox {
        position: relative;
        width: 200px;
        height: 200px;
    }

    /* 右图与左图宽高比 等同于 右盒与遮罩的比例 */
    .mask {
        cursor: pointer;
        width: 80px;
        height: 80px;
        background-color: rgba(0, 0, 255, 0.24);
        display: none;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

<body>
    <div class="box">
        <div class="leftBox">
            <img src="./imgs/素材.jpg" alt="" class="leftImg">
            <div class="mask"></div>
        </div>
        <div class="rightBox">
            <img src="./imgs/素材.jpg" alt="" class="rightImg">
        </div>
    </div>
</body>
<script>
    // 鼠标移入事件
    document.querySelector(".leftBox").onmouseover = function () {
        document.querySelector(".rightBox img").style.display = "block";
        document.querySelector(".mask").style.display = "block";
    }
    // 鼠标移出事件
    document.querySelector(".leftBox").onmouseout = function () {
        document.querySelector(".rightBox img").style.display = "none";
        document.querySelector(".mask").style.display = "none";
    }
    let box = document.querySelector(".box")
    let mask = document.querySelector(".mask")
    let rightBox = document.querySelector(".rightBox")
    let leftBox = document.querySelector(".leftBox")
    // 前置条件:   右图与左图宽高比 等同于 右盒与遮罩的比例 
    // 满足前置条件  事件公式才有意义
    // onmouseover 鼠标进入  onmouseout 鼠标离开
    // 鼠标移动事件  
    document.querySelector(".leftBox").onmousemove = function (e) {
        // 实现鼠标位于遮罩层正中
        // 遮罩层定位left公式: (鼠标位于页面x轴的位置 - 大盒子与左上角的距离) - (遮罩层宽度 / 2)
        let x = (e.pageX - box.offsetLeft) - (mask.offsetWidth / 2);
        // 遮罩层定位top公式: (鼠标位于页面y轴的位置 - 大盒子与左上角的距离) - (遮罩层高度 / 2)  
        let y = (e.pageY - box.offsetTop) - (mask.offsetHeight / 2);
        // 如果x轴结果小于0 强制赋0
        x = x < 0 ? 0 : x;
        // 如果x轴结果大于 (左盒宽度-遮罩宽度)   强制赋为 (左盒宽度-遮罩宽度)
        x = x > (leftBox.offsetWidth - mask.offsetWidth) ? (leftBox.offsetWidth - mask.offsetWidth) : x;
        // 如果y轴结果小于0 强制赋0
        y = y < 0 ? 0 : y;
        // 如果y轴结果大于 (左盒宽度-遮罩宽度)   强制赋为 (左盒宽度-遮罩宽度)
        y = y > (leftBox.offsetHeight - mask.offsetHeight) ? (leftBox.offsetHeight - mask.offsetHeight) : y;
        // 给遮罩定位属性赋值
        mask.style.left = x + 'px'
        mask.style.top = y + 'px'
        // 右图的top定位属性公式为 :   - (x*(右盒高度/遮罩高度))  结果需要是负数 前面用 - 号改变
        document.querySelector(".rightBox img").style.top = -y * (rightBox.offsetHeight / mask.offsetHeight) + 'px'
        // 右图的left定位属性公式为 :   - (x*(右盒宽度/遮罩宽度)) 结果需要是负数 前面用 - 号改变
        document.querySelector(".rightBox img").style.left = -x * (rightBox.offsetWidth / mask.offsetWidth) + 'px'
    }
</script>

</html>

JS实现放大镜

一、基本流程

二、代码注释详解