JavaScript仿京东放大镜

HTML

<div class="box">
        <div class="preview_img">
            <img src="images/s3.png" >
            <div class="mask"></div>   <!--遮罩层-->
            <div class="big">
                <img src="images/big.jpg" class="bigImg">
            </div>
        </div>
    </div>

CSS

*{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 590px;
            margin: 20px ;
        }
        .preview_img{
            position: relative;
            height: 398px;
            border: 1px solid #ccc;
        }
        .mask{
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: #FEDE4F;
            border: 1px solid #ccc;
            opacity: 0.5;
            cursor: move;
        }
        .big{
            position: absolute;
            top: 0;
            left: 410px;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            z-index: 999;
            overflow: hidden;
            display: none;
        }
        .bigImg {
            position: absolute;
            top: 0;
            left: 0;
        }

JS

window.addEventListener('load',function(){
        var preview_img = document.querySelector('.preview_img')
        var mask = document.querySelector('.mask')
        var big = document.querySelector('.big')
        //进入preview_img 显示
        preview_img.addEventListener('mouseover',function(){
            mask.style.display = 'block'
            big.style.display = 'block'
        })
        //离开preview_img 隐藏
        preview_img.addEventListener('mouseout',function(){
            mask.style.display = 'none'
            big.style.display = 'none'
        })
        preview_img.addEventListener('mousemove',function(e){
            var x = e.pageX - this.offsetLeft
            var y = e.pageY - this.offsetTop
            
            var maskX = x -mask.offsetWidth / 2
            var maskY = y -mask.offsetHeight / 2
            var maskMax = preview_img.offsetWidth - mask.offsetWidth
            if (maskX <= 0) {
                 maskX = 0;
            } else if (maskX >= maskMax) {
                maskX = maskMax;
            }
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= maskMax) {
                maskY = maskMax;
            }
            mask.style.left = maskX +'px'
            mask.style.top = maskY +'px'
            // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
            var bigImg = document.querySelector('.bigImg')
            var bigMax = bigImg.offsetWidth - big.offsetWidth
            var bigX = maskX * bigMax / maskMax
            var bigY = maskY * bigMax / maskMax

            bigImg.style.left = -bigX +'px'
            bigImg.style.top = -bigY +'px'

        })
    })

运行结果

这是项目里的两张图片