仿京东放大镜案例详细分析与模态框区别

1、黄色遮盖层跟随鼠标功能
2、把鼠标给遮盖曾不合适 因为遮盖层坐标以父元素为准
3、首先获得鼠标在盒子的坐标
4、之后把 数值给遮盖层作为left和 top值
5、此时用鼠标移动事件，但还是在小图片盒子内移动
6、发现遮盖层位置不对，需要就去盒子宽度和高度的一半
7、遮盖层不能超出小盒子图片的盒子范围
8、如果坐标小于0 ，就把坐标的位置设置为0
9、如果大于遮盖层最大的距离，就把坐标设置为最大的移动距离
10、遮挡层最大的移动距离：小图片盒子宽度减去遮挡层盒子宽度
11、当移动小盒子的时候大盒子跟着移动
12、求大图片的移动距离 ：遮挡层移动距离/遮挡层最大移动距离=大图片移动距离/大图片最大移动距离
即遮挡层移动距离*大图片移动距离/遮挡层最大移动距离


放大镜与模态框本质的不同在于：
模态框是鼠标的坐标减去盒子内的坐标

放大镜来说 是得到鼠标内的坐标 之后把鼠标值给黄色的坐标

因为鼠标的位置与盒子之间有距离，所以需要宽度的一半来完成这样的效果