关于模仿京东放大镜制作思路及遇到的问题

思路步骤：

要制作如上图所示的一个放大镜，我们首先要明确它的功能：
1.鼠标悬浮在小图上，中图出现对应的图片，同时鼠标悬浮在哪个小图，小图边框颜色改变，然后右下角出现一个小三角。
2.鼠标悬浮在小图这一行时，左右两侧出现翻页的图标，用来展示剩余未显示的小图。
3.当鼠标悬浮在中图上时，大图出现，且为对应的大图。这时鼠标周围环绕正方形的一个小型图层，鼠标为移动图标，然后移动鼠标，大图跟着变换到鼠标焦点相应的位置处。

步骤：

1. 首先将这个分为三个部分，第一个部分为中图部分，第二个为下部的小图部分，第三个为右方的大图部分。
2. 小图部分需设置为行内元素排列为一行，然后超出整体盒子的部分溢出隐藏。
3. 设置左右图标，悬浮时才显现。
4. 为图标增添功能。左右平移。这里我设置的是一页四张图。这时遇到了第一个问题。
5. 使用js为小图增添功能，当鼠标悬浮在某小图上时，边框变色，右下角出现小三角。鼠标离开变换结束。这里通过给其增添class移除class实现。
6. 给小图添加自定义属性以便于拿到对应的中图和大图，鼠标悬浮在小图上时，通过拼接src地址，来完成中图和大图的切换。
7. 当鼠标进入中图时，大图显现，同时出现小层作为放大镜，小层不能超出中图所在区域，这里用了三目运算符。这里出现问题二。
8. 鼠标移动，层跟随移动，大图移动，看上去就像是放大了中图的某个部分一样，这里需要运用比例，来设置大图的背景图的相对位置。这里出现问题三。

遇到的问题：

问题一：
由于我设置了九张小图，所以用transform：translatex（“数值”);这个方法不可行。单纯使用平移的话，只能平移一定距离，不能翻到再下一页。
问题二：
在用js新建一个小的图层用来充当放大镜时，需要获取鼠标的坐标，来使其鼠标始终保持在小图层的中心位置，且鼠标移动，图层跟着移动。这个时候首先需要通过获取鼠标的横纵坐标来设置小层的绝对位置。这里我无论是使用clientX或是pageX，offsetX，他们的值都相同。所以我选择了clientX，然后给它减去小层宽度的一半，高类似。这时我发现鼠标未在小层的中心位置。后来发现：因为我之前给总共的盒子设置了margin值，所以clientX需要再减去margin的值。这里就需要获取这个盒子相对于浏览器的位置了，我又不想改变结构给它再加一个总体的盒子。经查找，发现一个方法：要获取的元素.getBoundingClientRect（）；要注意的是，这个方法获取到的是某个元素相对于浏览器视窗的位置，它返回的是一个对象，具有四个属性：left，right，top，bottom。这样，再给得到的clientX减去这个位置即可。
PS：

• clientX，clientY是点击位置相对于当前body可视区域的。
• pageX，pageY是点击位置相对于整个页面来说的，包括被卷进去的body部分。
• screenX，screenY是点击位置距离电脑屏幕的坐标。
• offsetX，offsetY是相对于带有定位的父盒子的坐标。
  问题三：
  当时无论鼠标怎么移动，大图纹丝不动，后来发现大盒子的样式设置background-position的值为left top；同时在js中给其添加时，第一个值的px后面忘记了那个空格，必须有空格。

        bigbox[0].style.backgroundPosition=(-clientX*bili)+"px "+(-clientY*bili)+"px";