JavaScript实现放大镜效果

原理：

　　鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置；

　　遮罩层（放大镜）如何移动，大图片反方向对应倍数移动

主要涉及三个事件:

　　鼠标移入 ：显示遮罩层和大图区域

　　鼠标移出 ：隐藏遮罩层和大图区域

　　鼠标移动

该案例使用的图片分辨率大小是1440*900

HTML：

 1     　　
 2         <div id="small">
 3             <img src="img/dog.jpg" />
 4             
 5             <div id="mark">div>
 6         div>
 7         
 8         <div id="big">
 9             <img src="img/dog.jpg" />
10         div>    

CSS：

 1 　　

JS:

 1 　　　　

效果：