web前端高级JS实战 - 仿京东商品图放大镜效果

目录

 

1.结构功能分析

1.1 结构分析图

1.2 HTML和CSS代码展示

2.JS分析+代码

2.1 当鼠标经过/离开，mask显示/隐藏，大图片盒子显示/隐藏

2.2 遮罩层跟随鼠标移动

（1）先计算出鼠标在盒子内的坐标

（2）把计算好的左边赋值给遮罩层

（3）x坐标小于0 让他停在0的位置；x大于最大移动宽度，停在最大移动宽度的位置

2.3 移动遮罩层，大图片跟着移动

3.最终效果图

---

1.结构功能分析

1.1 结构分析图

• 整个案例可以分为三个功能模块

• 鼠标经过小图片盒子， 遮挡层盒子 和 大图片盒子显示，离开隐藏2个盒子功能

• 黄色的遮挡层跟随鼠标移动功能。

• 移动黄色遮挡层，大图片跟随移动功能。

 1.2 HTML和CSS代码展示

2.JS分析+代码

2.1 当鼠标经过/离开，mask显示/隐藏，大图片盒子显示/隐藏

    //先获取我们需要用到得到元素
    var minBox = document.querySelector('.minBox');
    var mask = document.querySelector('.mask');
    var maxBox = document.querySelector('.maxBox');

    //鼠标经过事件 mouseover   隐藏 none  显示  block 
    minBox.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        maxBox.style.display = 'block';
    })
    //鼠标离开事件 mouseout
    minBox.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        maxBox.style.display = 'none';
    })

2.2 遮罩层跟随鼠标移动

（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）x坐标小于0 让他停在0的位置；x大于最大移动宽度，停在最大移动宽度的位置

          ！！！！ 最大移动宽度和高度 = minBox的宽度/高度-mask的宽度/高度

    var maxMoveWidth = minBox.offsetWidth - mask.offsetWidth;
    var maxMoveHeigh = minBox.offsetHeight - mask.offsetHeight;
    //if判断遮罩层移动不超过小图片盒子边框
    //mask 移动的距离  x轴  
    if (maskX <= 0) {
         maskX = 0;
    } else if (maskX >= maxMoveWidth) {
         maskX = maxMoveWidth;
    }
    //mask 移动的距离  x轴
    if (maskY <= 0) {
         maskY = 0;
    } else if (maskY >= maxMoveHeigh) {
         maskY = maxMoveHeigh;
    }
    mask.style.left = maskX + 'px';
    mask.style.top = maskY + 'px';

2.3 移动遮罩层，大图片跟着移动

        ！！！！大图片移动距离=（遮罩层移动距离  X 大图片最大移动距离）/ 遮罩层最大移动距离

    var maxImg = document.querySelector('#maxImg');
    //大图片最大移动距离
    var maxBigMoveX = maxImg.offsetWidth - maxBox.offsetWidth;
    var maxBigMoveY = maxImg.offsetHeight - maxBox.offsetHeight;
     
    var bigMoveX = maskX * maxBigMoveX / maxMoveWidth;
    var bigMoveY = maskY * maxBigMoveY / maxMoveHeigh;

    maxImg.style.left = -bigMoveX + 'px';
    maxImg.style.top = -bigMoveY + 'px';

3.最终效果图

---