JS京东放大镜

最重要的js代码实现放大镜效果（其他文件素材已上传zip文件）

window.addEventListener('load', function () {
    
    
    var preview_img = document.querySelector('.preview_img')
    var mask = document.querySelector('.mask')
    var big = document.querySelector('.big')
    var bigImg = document.querySelector('.bigImg')


    preview_img.addEventListener('mouseover', function () {
    
    
        mask.style.display = 'block'
        big.style.display = 'block'

    })

    preview_img.addEventListener('mouseout', function () {
    
    
        mask.style.display = 'none'
        big.style.display = 'none'

    })
    //因为mask是正方形 所以宽高一样呀

    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.offsetWidth / 2
        //x轴最大移动距离 100
        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定位
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        //遮盖层移动距离    ：  大图片移动距离
        //遮盖层最大移动距离 ：大图片最大移动距离

        //大图片最大移动距离
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        var bigX = -maskX * bigMax / maskMax
        var bigY = -maskY * bigMax / maskMax
        //g给大图片进行定位
        bigImg.style.left = bigX + 'px';
        bigImg.style.top = bigY + 'px';

    })
})