码迷,mamicode.com
首页 > Web开发 > 详细

js放大镜特效

时间:2018-07-02 23:34:01      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:否则   mouseover   offset   tle   bsp   接下来   htm   use   背景   

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

放大镜特效设计:

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

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

js放大镜特效

标签:否则   mouseover   offset   tle   bsp   接下来   htm   use   背景   

原文地址:https://www.cnblogs.com/xiaoya625/p/9256352.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!