今天工作无聊随手写了一个放大镜案例 希望对于初学者有用!

    <div class="small">
        <!-- 小图 -->
        <img src="./img/2.jpg" width="200" alt="">
        <!-- 遮罩 -->
        <div class="mask"></div>

    </div>
    <div class="big">
        <img src="./img/2.jpg">
    </div>
</div>
<script>
    // 1.当鼠标滑动到当前模块，显示遮罩层和大图
    // 1.1获取页面元素
    var box = document.getElementById('box')
    var samll = document.querySelector('.small')
    var mask = document.querySelector('.mask')
    var big = document.querySelector('.big')
    var bigImag = big.children[0]
    console.log(bigImag);
    // 通过改变mask、big元素的display属性，控制显隐藏
    box.onmouseover = function () {

        // 鼠标划上去时显示
        mask.style.display = 'block'
        big.style.display = 'block'
    }
    // 移开隐藏
    box.onmouseout = function () {

        // 鼠标划上去时显示
        mask.style.display = 'none'
        big.style.display = 'none'
    }


    // 2.遮罩层跟随鼠标
    // 鼠标移动事件
    samll.onmousemove = function (e) {
        // console.log(e.clientX);
        // console.log(e.clientY);
        // 动态获取鼠标的xy距离  外框有100的margin值
        var x = e.clientX - 100;
        var y = e.clientY - 100;
        // 动态获取mask元素的宽度
        x = x - mask.offsetWidth / 2
        y = y - mask.offsetHeight / 2
        // 2.02遮罩层移动的区域有限制
        // 1).不超过上
        if (y < 0) { y = 0 }
        // 2).不超过左
        if (x < 0) { x = 0 }
        // 3).不超过右
        // samll.offsetWidth-mask.offsetWidth X值的最大限度
        if (x > samll.offsetWidth - mask.offsetWidth) { x = samll.offsetWidth - mask.offsetWidth }
        // 4).不超过下
        if (y > samll.offsetHeight - mask.offsetHeight) { y = samll.offsetHeight - mask.offsetHeight }
        // 动态控制mask元素的left、top
        mask.style.top = y + 'px';
        mask.style.left = x + 'px';
        // 遮罩层移动距离/遮罩层移动最大距离 =
        // 大图移动的距离/大图最大移动距离
        // 求：大图移动的距离

        //大图移动的距离  =  遮罩层移动距离/遮罩层移动最大距离*大图最大移动距离
        var bigX;
        var bigY;
        console.log(x);
        bigX = x / (samll.offsetWidth - mask.offsetWidth) * (bigImag.offsetWidth - big.offsetWidth)
        bigY = y / (samll.offsetHeight - mask.offsetHeight) * (bigImag.offsetHeight - big.offsetHeight)

        // 3.大图展示的区域
        bigImag.style.top = - bigY + 'px';
        bigImag.style.left = - bigX + 'px'


    }
</script>