js简单实现放大镜效果

前言

在平时写页面时经常会遇到要实现放大镜效果，今天我们来简单实现一下，以下是效果图

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、静态页面的搭建

首先我们要做的是搭建一个静态页面

<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>

二、样式修改

对搭建完成的静态页面进行样式修改

* {
            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%;
        }

三、js代码

1.获取元素

首先我们要获取元素

// 左边盒子
    var leftBox = document.getElementById('leftBox')
    // 蒙版
    var mask = document.getElementById('mask')
    // 右边盒子
    var rightBox = document.getElementById('rightBox')
    //
    var moveBox = document.getElementById('moveBox')
    // 三张图片
    var imgs = document.getElementById('imgs').getElementsByTagName('img')
    // 左边图片
    var leftImg = document.getElementById('leftImg')
    var rightImg = document.getElementById('rightImg')

2.绑定事件

然后我们要对获取到的元素绑定事件

// 移入
    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
        }
    }

3.移动事件

var leftStyle = 0
    var topStyle = 0
leftBox.onmousemove = function (event) {
        var event = event || window.event
        leftStyle = event.clientX - leftBox.offsetLeft - leftBox.clientLeft - mask.clientWidth / 2
        topStyle = event.clientY - leftBox.offsetTop - leftBox.clientTop - mask.clientHeight / 2
        // 设置临界值
        var maxX = leftBox.clientWidth - mask.clientWidth
        var maxY = leftBox.clientHeight - mask.clientHeight - 100
        if (leftStyle > maxX) {
            leftStyle = maxX
        }
        if (leftStyle < 0) {
            leftStyle = 0
        }
        if (topStyle > maxY) {
            topStyle = maxY
        }
        if (topStyle < 0) {
            topStyle = 0
        }
        // 求倍数
        var multipleX = rightImg.clientWidth / leftImg.clientWidth
        var multipleY = rightImg.clientHeight / leftImg.clientHeight

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

---