06.仿京东放大镜效果

案例分析

①整个案例可以分为三个功能模块。
②鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏两个盒子。
③黄色的遮挡层跟着鼠标走。
Ⅰ.把鼠标坐标给遮挡层不合适，因为遮挡层坐标以父盒子为准
Ⅱ.首先是获得鼠标在盒子的坐标
Ⅲ.之后把数值给遮挡层作为left和top值
Ⅳ.此时用到鼠标移动事件，但是还是在小图片盒子内移动
Ⅴ.发现遮挡层位置不对，需要再减去盒子自身宽高的一半
Ⅵ.遮挡层不能超出小盒子的范围
Ⅶ.如果小于零，就把坐标设置为0
Ⅷ.如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
Ⅸ.遮挡层的最大移动距离：小图片盒子宽度 - 遮挡层宽度
④移动黄色遮挡层，大图片跟随移动。
Ⅰ.大图片的移动距离公式
大图片移动距离 = （遮挡层移动距离 大图片最大移动距离）/ 遮挡层最大移动距离
*源代码：
链接：https://share.weiyun.com/Nz0nf4j8 密码：h6wf7t

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 就显示遮挡层和big盒子  鼠标离开就都隐藏
    preview_img.addEventListener('mouseover',function(){
        mask.style.display = 'block';
        big.style.display = 'block';
    });
    preview_img.addEventListener('mouseout',function(){
        mask.removeAttribute('style');
        big.removeAttribute('style');
    });
    //黄色的遮挡层跟着鼠标走
    preview_img.addEventListener('mousemove',function(e){
        // 1.先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        //2.计算鼠标在盒子内的坐标
        var maskX = x - mask.offsetWidth/2;
        var maskY = y - mask.offsetHeight/2;
        //3.遮挡层不能超出小盒子的范围  如果小于零，就把坐标设置为0
        // 如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
        // 遮挡层的最大移动距离：小图片盒子宽度 - 遮挡层宽度
        var maskMaxX = preview_img.offsetWidth - mask.offsetWidth;
        var maskMaxY = preview_img.offsetHeight - mask.offsetHeight;
        if(maskX <= 0){
            maskX = 0;
        }else if(maskX >= maskMaxX){
            maskX = maskMaxX;
        }
        if(maskY <= 0){
            maskY = 0;
        }else if(maskY >= maskMaxY){
            maskY = maskMaxY;
        }
        // 4.将鼠标坐标给遮挡层定位
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        //5.大图片移动距离 = （遮挡层移动距离 * 大图片最大移动距离）/ 遮挡层最大移动距离
        // 大图片最大移动距离
        var bigMaxX = bigImg.offsetWidth - big.offsetWidth;
        var bigMaxY = bigImg.offsetHeight - big.offsetHeight;
        // 大图片的移动距离
        var bigX = (maskX * bigMaxX) / maskMaxX;
        var bigY = (maskY * bigMaxY) / maskMaxY;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    });
});

.