js放大镜特效

Posted 2020-11-21 雅兒

原理分析：当鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置。（同时，当鼠标在小图片上移动时，右侧大图片往相反的方向移动。）

放大镜特效设计：

①页面元素：小图片，大图片以及盛放图片的容器

②事件捕获：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的隔离层，之后将所有绑定在原先图片容器上的事件绑定到该隔离层。