原理分析：当鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置。（同时，当鼠标在小图片上移动时，右侧大图片往相反的方向移动。）
放大镜特效设计：
①页面元素：小图片，大图片以及盛放图片的容器
②事件捕获：onmouseover(当鼠标指针移动到指定对象上时发生)、onmouseout(当鼠标指针移除指定对象时发生)、onmousemove（当鼠标指针移动时发生）
③技术难点：offsetLeft（相对于父元素的左位移）、offsetTop (相对于父元素的顶部位移)
注：offsetLeft和style.left的区别：a. 后者返回字符串（10px），前者返回数值（10）；
b. 后者是可读写的，前者是只读的。所以要改变元素的位置要用style.left；
c. style.left需要提前定义，否则取到的是空值；
d. offestLeft只针对html中设置的值有效，在css中设置的无法识别。
offsetWidth/offsetHeight 元素所展现出的宽高
event.clientX/event.clientY 元素相对于页面的横纵坐标
制作放大镜特效所需的计算
重点：如何让小图片上的放大镜和大图片同时移动。
公式：小img宽/大img宽 = 放大镜宽/大图片可视区域宽 = 小图片左移/大图片右移
其中，小img宽和大img宽已知，放大镜宽和可视区域宽已知，通过鼠标左移可以求得大图片右移，确定大图片位置。
开发放大镜特效：
小图片左位移/(大img宽-小img宽) = ？/（可视区域宽 - 放大镜宽）
兼容性问题：
因为在IE浏览器中，容易中放入图片或者span等的时候，但是当鼠标移入图片时，会被认为是已经移除了容器，而接下来紧接着又触发了onmouseover事件，因此造成了放大镜特效的反复闪烁。
解决： 在原有的图片上覆盖一层背景色透为0的隔离层，之后将所有绑定在原先图片容器上的事件绑定到该隔离层。
原文地址：https://www.cnblogs.com/xiaoya625/p/9256352.html