放大镜效果

周末忙活了两天，啥也没写。今天先来一篇吧，这是在前端中几乎很常见的一个效果，今天就写写吧。

在实现一个需求或者效果之前，我们需要明确的就是自己的思路是怎么样的，有了思路其他的也就好办多了，磨刀不误砍柴工。

要实现放大镜效果，我们首先要有一个大体的效果图，如上图所示，下面是思路分析：

1.页面加载完后就获取所要操作的节点对象（smallBox、tool、bigBox、bigImg等）

2.当鼠标浮动到小盒子上时，显示输出放大镜（tool）,显示出右边的大盒子。

3.在鼠标在小盒子上移动时，放大镜（tool）跟着鼠标移动（范围就是小盒子内）。右边的大盒子中的大图片也随之移动。

那么我们需要怎样做才能实现这样的效果呢，再来一张效果分析图也许就很明了了，如下：

右部显示出来是放大的效果，那么右部的容器和小工具的大小比求出图片需要放大多少倍。其实这个原理就是小工具在左侧的小盒子上移动，然后图片按比例放大后显示在右侧的盒子上，（图片大盒子小，显示不完全）然后移动小工具，让右侧大图片在右侧盒子内移动，所以小工具的宽高比如为100*100，那么右侧大盒子的宽高需按照比例来，可以设置为400*400，那么左侧的原始图片假如宽度为300，高度可以