效果:
1、 鼠标放上去会有半透明遮罩、右边会有大图片局部图
2、 鼠标移动时右边的大图片也会局部移动
放大镜的关键原理:
鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置;
放大镜的移动方向和大图片的移动方向:横向和纵向都是相反,才可以保证同步;
页面元素:
技术点:事件捕获,定位
难点:计算
需要元素:小图片和大图片,存放小图片和大图片的容器,有一个放大镜;
涉及到的技术点:
(1) 鼠标事件的捕获:onmouseover(进入)、onmouseout(移除)、onmousemove(移动)
(2) offsetLeft、offsetTop、offsetWidth、offsetHeight、event.clientX、event.clientY
- offsetLeft子元素相对于父元素的左位移
- offsetWidth,offsetHeight一个元素的宽度和高度,宽度和高度是不包括滚动条的。
event.clientX、event.clientY鼠标的X轴和Y轴,相对于整个页面的坐标,而不是子元素
- offsetLeft和style.left对比:
(1)、style.left返回的是字符串,如30px、offsetLeft返回的是数值30;
(2)、style.left是可读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left;
(3)、style.left的值需要事先定义,否则取到的值为空。
style.left只针对在HTML中写的值有效,样式表中无法定义style.left;
制作放大镜所需要的计算
》重点:如何让小图片上的放大镜和大图片同步移动
关键:小图片的比例和大图片的比例是一样的,放大镜比例和右侧大的容器比例是一样的;他们之间的比例是相同的
移动时的比例计算:
放大镜核心计算公式:
放大镜
个人感觉MarkBox是多余的操作,于是我将上述代码中与markBox相关的操作去掉,如下:
放大镜
运行效果相同