原生JS实现放大镜效果(详解)

前言:在电商平台我们经常能看到这样的放大镜效果,如何用原生的JS代码来实现这样的功能呢?

鼠标

1.思路分析:三事两线

三个事件:

• 鼠标移入:显示出大图片和黄色遮罩
• 鼠标移动:盒子跟随鼠标移动，且鼠标在盒子的中心位置,同时大图片按比例移动
• 鼠标移出:隐藏大图片和遮罩层

两线:

• e.pageX,e.pageY:pageX/Y坐标系相对于页面左上角，实际上就是界面滚动出去的距离 + 可视区域的距离.(IE8以及之前版本不支持)
• offsetLeft,offsetTop:获取元素的外边框到定位父级的内边框的（左/上）距离

---

2.书写顺序

1.获取元素
2.注册事件
3.事件处理
因为写的注释在代码中比较暗,每个部分挑出来,如果理解可以直接跳到最后看总代码,图片也放在最后方便学习.

---

HTML,CSS部分:结构比较简单

---

重点部分

1.获取元素

 //1.获取元素:都是通过ID获取
            let smallBox = document.getElementById('smallBox');//小盒子
            let mask = document.getElementById('mask');//遮罩
            let bigBox = document.getElementById('bigBox');//大盒子
            let bigImg = document.getElementById('bigImg');//大图片
            let box = document.getElementById('box'); //最外面box box的offsetLeft才是到body的距离.

2.事件注册和事件处理

• 鼠标移入

            smallBox.onmouseover = ()=> {
                //3.事件处理:显示big大图片盒子和mask遮罩盒子
                bigBox.style.display = 'block';
                mask.style.display = 'block';
            };

• 鼠标移出

  smallBox.onmouseout = ()=> {
                //3.事件处理:隐藏big大图片盒子和mask遮罩盒子
                bigBox.style.display = 'none';
                mask.style.display = 'none';
            };

• 鼠标移动
  1.遮罩跟随鼠标移动,且鼠标在遮罩中心,e=e || window.event 兼容性代码

 smallBox.onmousemove =  (e)=> {
                e = e || window.event;
                //3.事件处理:
                //a.遮罩mask跟随鼠标移动
                //蓝线 = 红线（e.apgeX） - 绿线（box.offsetLeft）
                let x = e.pageX - box.offsetLeft;
                let y = e.pageY - box.offsetTop;
                //b.鼠标在mask中心位置
                x -= mask.offsetWidth / 2;
                y -= mask.offsetHeight / 2;
                //这个距离是数值,所以要做字符串的拼接
                mask.style.left = x + 'px';
                mask.style.top = y + 'px';
}

2.大图片按比例移动:

                //d.bigImg相应移动
                bigImg.style.left = -x * bigBox.offsetWidth / mask.offsetWidth + 'px';
                bigImg.style.top = -y * bigBox.offsetHeight / mask.offsetHeight + 'px';

3.边界检测,超出距离遮罩不再移动
距离计算: 0 < x < smallbox宽度350 - mask宽度175 = 175,Y同理
当x小于0时,x=0,防止遮罩移出盒子

                x = x < 0 ? 0 : x;
                x = x > 175 ? 175 : x;
                y = y < 0 ? 0 : y;
                y = y > 175 ? 175 : y;

---

总代码

图片自取

001.jpg

01.jpg