JS原生代码—京东放大镜案例

JS原生代码—京东放大镜案例

JS代码

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');
    //1.当鼠标经过preview_img就显示隐藏的mask遮挡层和big大盒子
    preview_img.addEventListener('mouseover',function(){
        mask.style.display = 'block';
        big.style.display = 'block';
        // console.log(123);
    })
    preview_img.addEventListener('mouseout',function(){
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    //2.鼠标移动，黄色盒子跟着鼠标走
    preview_img.addEventListener('mousemove',function(e){
        
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;

        //遮挡层的最大移动距离
        var maskMax = preview_img.offsetHeight-mask.offsetHeight;
        //3.限制遮挡层移动的范围
        var maskX = x - mask.offsetWidth/2;
        var maskY = y -mask.offsetWidth/2;
        //限制横向移动
        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';

        //4.大图像的移动距离 = 遮挡层的移动距离*大图像的最大移动距离/遮挡层的最大移动距离
        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';
    })

})

相关代码和文档在这](https://gitee.com/xiaoqiang001/java-script.git)