js完成放大镜

效果展示：

js写放大镜案例

html:

<div class="wrap">
        <div class="left">
            <div class="mask"></div>
            <img src="./img/s.jpg" alt="">
        </div>
        <div class="right">
            <img src="./img/b.jpg" alt="">
        </div>
    </div>

js:

<script>
        //  mask跟随鼠标移动
        //  获取mask遮罩层
        var mask = document.querySelector('.mask')
        //  获取左边盒子
        var left = document.querySelector('.left')
        //   获取右边盒子
        var right = document.querySelector('.right')
       //   获取右边的盒子里面的大图
        var imgRight = right.querySelector('img')
        //  鼠标移入左边盒子的事件   移入时遮罩层显示 右边大图显示
        left.onmouseover = function () {
            mask.style.display = "block"
            right.style.display = "block"
        }
        //  鼠标移出左边盒子的事件   移入时遮罩层隐藏 右边大图隐藏
        left.onmouseout = function () {
            mask.style.display = "none"
            right.style.display = "none"
        }
        //  鼠标在左边盒子里面移动
        left.onmousemove = function (e) {
            // 获取鼠标当前坐标
            var x = e.clientX;
            var y = e.clientY;
            //  因为左边盒子有偏移，鼠标的位移距离要减去父元素（左边盒子）的偏移，才是真正的鼠标在左边盒子里面的位移坐标
            x = x - this.parentNode.offsetLeft;
            y = y - this.parentNode.offsetTop;
            console.log(x)
            console.log(y)
            //  鼠标只能在左边盒子内部移动产生效果，超出就不行了
            //  所以要控制鼠标坐标为小于100时 大于300时的使得遮罩层定死在左边大盒子边缘处不会跟鼠标移出去
            if (x <= 100) {
                x = 100
            }
            if (x >= 300) {
                x = 300
            }
            if (y <= 100) {
                y = 100
            }
            if (y >= 300) {
                y = 300
            }
            //  遮罩层跟随鼠标在左边盒子内移动
            mask.style.left=x-100+'px'
            mask.style.top=y-100+'px'
			//  右边大图移动显示部分，显示的部分需要移动的距离为为左边盒子内部小图的大小的两倍。
			//  往左侧 上面移动所以为负数，其他详情请查看“css精灵图”
            imgRight.style.left=-2*(x-100)+'px'
            imgRight.style.top=-2*(y-100)+'px'

        }

css:

* {
    margin: 0;
    padding: 0;
}

.wrap {
    display: flex;
}

.left {
    width: 400px;
    height: 400px;
    position: relative;
}

.left .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: rgba(116, 112, 112, 0.6);
}

.left img {
    width: 100%;
    height: 100%;
}

.right {
    width: 400px;
    height: 400px;
    margin-left: 200px;
    position: relative;
    overflow: hidden;
}

.right img {
    position: absolute;
    left: 0;
    top: 0;
}