在一些大型的购物网站 你经常可以看到这个效果，通过放大镜效果，可以把一个小的图片的某一部位放大到清晰可见。 
首先你必须要有2张图片，一张缩略图和一张高清晰的图片。
然后当鼠标在缩略图里移动时，通过计算鼠标在缩略图里的位置和比例。
{zh1}通过比例就可以得出大图要显示的部分。
所以最简洁的HTML代码结构如下：
当鼠标滑入小图片时，我们需要添加一个半透明层用来显示当前鼠标框住的区域。
有3种状态：
(1)鼠标滑入
(2)鼠标滑动
(3)鼠标滑出
滑入时，我们需要给半透明层定位，并马上显示出层。通过给元素绑定mousemove事件。
滑动时，需要给透明层实时定位，在计算定位时，要注意半透明层不超出图片边界。
同时在mousemove时，添加了一个setTimeout，减少资源占用。
滑出后，隐藏半透明层，并把mousemove解除绑定，减少资源占用.
这一步最关键的就是，滑动时中心点和坐标的计算。
演示：
第2步完成后，第3步就相对简单了。
在刚才3种状态上，在添加点内容。
鼠标滑入时，需要添加大图的显示。
鼠标滑动时，需要根据鼠标当前的位置在小图中的比例，然后把比例*大图的宽度高度 得到大图显示的位置。
鼠标滑出后，需要隐藏大图。
这一步最关键的就是，滑动时比例的计算。
演示：
此效果不仅是显示商品，地图鹰眼效果也可以使用.
下载：
![德州[环球新闻]古典硬包背景墙](https://pic17_1.qiyeku.com/qiyeku_pic/2017/6/28/mnkzs/news/news_pic/image/2017_08_12/20170812092735853.jpg)
