京东放大镜效果：鼠标移动查看图片放大细节

要求：鼠标放上去之后，能够在旁边出现一个放大的大图片


1，先写两个盒子，都设置为隐藏

在大盒子里添加一个小盒子，并设置半透明

.mask{
    position: absolute;
    left: 0;
    top: 0;
    height: 200px;
    width: 200px;
    background-color: #FEDE4F;
    /* 半透明 */
    opacity: 0.5;
  /* 鼠标经过箭头变成十字形状 */
    cursor: move;
}

在旁边建一个大盒子用于显示放大的效果，并且设置显示在最上层

.big{
    position: absolute;
    left: 410px;
    top: 0;
    width: 500px;
    height: 500px;
    background-color: pink;
    overflow: hidden;
    /* 设置显示最上层 */
    z-index: 999;
 
}

两个盒子先都设置为隐藏，等鼠标经过触发了事件再显示出来

.mask和.big里面都设置

display: none;

2.写js代码，鼠标经过两个盒子都显示出来

// 先把页面加载完再加载js。window.addEventListener

window.addEventListener('load',function(){
    var preview = document.querySelector('.preview');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    //鼠标经过两个盒子都显示出来
    preview.addEventListener('mouseover',function(){
        mask.style.display='block';
        big.style.display='block';

    })
    //鼠标离开两个盒子都消失
    preview.addEventListener('mouseout',function(){
        mask.style.display='none';
        big.style.display='none';

    })
//这里填写鼠标移动的效果代码

})

3.让黄色的小盒子跟着鼠标移动

把鼠标在图内的坐标给小盒子

e.pageX是鼠标在整个浏览器的横坐标

this.offsetLeft是装图片盒子距离浏览器左边的位置

e.pageX - this.offsetLeft结果为鼠标在盒子内的位置

透明盒子移动的范围控制在图片盒子中间

 // 鼠标移动的效果
    preview.addEventListener('mousemove',function(e){
        // 鼠标在盒子内的位置,
        var x=e.pageX-this.offsetLeft;
        var y=e.pageY-this.offsetTop;
        // console.log(x,y)
        // 把坐标赋值个透明遮挡盒子,mask.offsetWidth是遮挡盒子的宽度
        // 并且把鼠标移到遮挡盒子中间,复制给小盒子坐标
        var maskX=x - mask.offsetWidth / 2;
        var maskY=y - mask.offsetHeight / 2;
        // preview.offsetWidth-mask.offsetWidth是最大移动的范围
        var maskMax = preview.offsetWidth-mask.offsetWidth;
        // 进行判断，不让透明盒子超出图片盒子的边界
        if(maskX<=0){
            maskX=0;
            // ，不能超过右边界
        }else if(maskX>maskMax){
            maskX=maskMax;
        }if(maskY<=0){
            maskY=0;
            // preview.offsetWidth-mask.offsetWidth是移动的范围，不能超过右边界
        }else if(maskY>maskMax){
            maskY=maskMax;
        }
        mask.style.left =maskX  + 'px';
        mask.style.top = maskY + 'px';

        //大图片移动的距离代码位置
        
    })

4.让大盒子显示的图片跟着透明盒子一块移动

    小盒子向右移，大盒子要向左移

    移动的距离成比例

大图片移动距离=透明层最大移动距离*大图片最大移动距离/透明层移动距离

 //大图片移动的距离代码
    var big_img=document.querySelector('.big_img');
    // 大图片最大移动距离=大盒子－图片,款和高相同的
    var big_imgMax=big.offsetWidth-big_img.offsetWidth;
    //大图片移动距离=透明层移动距离*大图片最大移动距离/  透明层最大移动距离  
    var bigX=maskX*big_imgMax/maskMax;
    var bigY=maskY*big_imgMax/maskMax;
    // 需要先给大盒子加个定位
    big_img.style.left= -bigX + 'px';
    big_img.style.top= -bigY + 'px';

欢迎关注公众号：oldCode
期待和你一起进步
公众号后台回复：放大镜效果 获得整个项目文件