原生js实现图片放大镜效果

原生js实现图片放大镜效果

放大镜原理
-------------------------------------------------------------————————————————
放大镜的实现过程是将一个小图放置在一个盒子里。宽高都是100%。当鼠标在小图盒子里移动时，出现一个移动块(阴影区域)。右侧大图片盒子出现一个等比例放大的在小图盒子移动块中的图片内容。如图(请勿过于认真看图片，注意圈圈(￢_￢))：

一定要理解上图中圈起来的阴影块是箭头指向的粉红色圈的等比缩小版。理解了这个在接下来的代码中，我们才知道怎么去计算右侧大图区域中的left、top值。也可以说成阴影移动块是模拟右侧大图盒子。右侧大图盒子中放置的是一张大的图片，然后盒子设置成溢出隐藏。而我们的移动块也是，不在阴影块中的内容，你都可以认为是溢出隐藏掉了。

当小图盒子中的移动块移动时，根据移动的距离去计算右侧大图盒子中图片移动的坐标。此时方便理解，你可以想像成阴影块是静止的，是阴影块下面的图片在移动。所以，我们需要计算出图片向x轴、y轴移动了多少，根据等比例公式换算出右侧大图盒子中的图片需要移动的坐标值。

代码分析

html

css

js