制作放大镜，首先必须要掌握常见的六大尺寸值。如果这六个值不太熟悉的话，可能有点吃力，不过下图已经分析的很清楚了，应该能看懂。需要注意的一点是，除了鼠标位置是按照窗口来进行定位的，如图绿色画线，其他四项尺寸值是按照父元素——子元素关系来计算尺寸，如body和div1，div1和div2 。

offsetLeft和style.left主要有三点不同：

现在来分析：当放大镜（鼠标）在小图片上移动 x 距离时，大图片移动的距离Y是多少呢？

其实根据 等比 关系，有图中的关系：

下图中关系式，其实就是由核心公式转化而来：X/?=B/D=A/C.

（为了方便，只讨论单方向和横轴方向距离）

X:放大镜向左移动的距离；

?：大图片向右（反方向）移动的距离；

A：放大镜的宽；

B：小容器的宽，为了兼容，实际为mark的宽，不过与小容器宽相等的；

C：大容器的宽；

D：大图片的宽；

图中数字代表距离，则x的值应该如下计算：

上面就是放大镜核心原理。明白了原理后，对于放大镜的移动范围，浏览器的兼容性等细节再进行优化可以咯。

代码还是要贴上来的：

 
 
 
 


 

 

 

 

  // 这张是小图片。
 
 

  // 这张是大图片。
 
 

这张是小图片，可以下载后置于源码中使用。

这张是大图片，可以下载后置于源码中使用。