js实现放大镜

一、效果图

二、使用步骤

1.html代码

代码如下（示例）：

<div id="box">
        <!-- 左边 -->
        <div id="leftBox">
            <div id="mask"></div>
            <div id="moveBox">
                <img src="./images/1.jpg" alt="" id="leftImg">
            </div>
            <div id="imgs">
                <img src="./images/1.jpg" alt="">
                <img src="./images/2.jpg" alt="">
                <img src="./images/3.jpg" alt="">
            </div>
        </div>
        <!-- 右边 -->
        <div id="rightBox">
            <img src="./images/1.jpg" alt="" id="rightImg">
        </div>
    </div>

1.css代码

代码如下（示例）：

 * {
            padding: 0;
            margin: 0;
        }

        #box {
            overflow: hidden;
        }

        #leftBox {
            position: relative;
            float: left;
            margin-left: 50px;
            width: 500px;
            height: 600px;
            border: 1px solid black;
        }

        #moveBox {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }

        #mask {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.3);
            display: none;
        }

        #moveBox img {
            width: 100%;
            height: 100%;
        }

        #imgs {
            height: 100px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        #imgs img {
            width: 70px;
            height: 70px;
            border: 1px solid red;
        }

        /* 右边 */
        #rightBox {
            float: left;
            margin-left: 50px;
            width: 500px;
            height: 500px;
            border: 1px solid red;
            overflow: hidden;
            display: none;

        }

        #rightBox img {
            width: 200%;
            height: 200%;
        }

2.js代码

代码如下（示例）：

// 封装 获取元素
    function $(x) {
        return document.getElementById(x)
    }
    // 蒙版
    var mask = $('mask')
    // 左边盒子
    var leftBox = $('leftBox')
    // 右边盒子
    var rightBox = $('rightBox')
    // 三张图片
    var imgs = document.getElementById('imgs').getElementsByTagName('img')
    // 左边图片
    var leftImg = document.getElementById('leftImg')
    // 右边图片
    var rightImg = document.getElementById('rightImg')

    var leftDistance = 0
    var topDistance = 0
    // 移入
    leftBox.onmouseover = function () {
        mask.style.display = 'block'
        rightBox.style.display = 'block'
    }
    // 移出
    leftBox.onmouseout = function () {
        mask.style.display = 'none'
        rightBox.style.display = 'none'
    }
    // 绑定点击事件
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function () {
            leftImg.src = this.src
            rightImg.src = this.src
        }
    }
    // 移动事件
    leftBox.onmousemove = function (event) {
        console.log(11);
        var event = event || window.event
        leftDistance = event.clientX - leftBox.offsetLeft - leftBox.clientLeft - mask.clientWidth / 2
        topDistance = event.clientY - leftBox.offsetTop - leftBox.clientTop - mask.clientHeight / 2

        // 设置临界值
        var imgs = $('imgs')
        console.log(imgs.clientHeight);
        var maxWidth = leftBox.clientWidth - mask.clientWidth
        var maxHeight = leftBox.clientHeight - mask.clientHeight - imgs.clientHeight
        // 左右
        if (leftDistance > maxWidth) {
            leftDistance = maxWidth
        }
        if (leftDistance < 0) {
            leftDistance = 0
        }
        // 上下
        if (topDistance > maxHeight) {
            topDistance = maxHeight
        }
        if (topDistance < 0) {
            topDistance = 0
        }
        // mask.style.left = leftDistance + 'px'
        // mask.style.top = topDistance + 'px'

        // 求倍数
        var multipleX = rightImg.clientWidth / leftImg.clientWidth
        var multipleY = rightImg.clientHeight / leftImg.clientHeight

        rightBox.scrollTop = topDistance * multipleY
        rightBox.scrollLeft = leftDistance * multipleX
        mask.style.left = leftDistance + 'px'
        mask.style.top = topDistance + 'px'
    }