JavaScript--图片放大镜

图片放大镜的原理：

     两张相同的图片img1和img2，img1上有一个#dd的div，通过鼠标移动dd，根据dd区域内的图片，来裁剪img2的图片，并将img2的图片放大，显示出来

    关键词：img1坐标，img2裁剪，img2放大

实现图片的放大效果，一共分为6步：

1. 为img1添加鼠标事件

2. 鼠标进入时dd显示，鼠标移出时dd隐藏

3. 获得鼠标的坐标 mouseX，mouseY

4. dd随鼠标的移动而移动

5. 对img2进行裁图处理 clip=“rect（top，width，height，left）”

6. 将img2图片放大

    公式：left=（width-倍数*mouseX）/倍数+x

            top= 10-mouseY+y

　原理图：

 

转载于:https://www.cnblogs.com/Ayinger/p/6890470.html