JS图片放大镜效果实现

1.首先，添加盒子：定义图片盒子small-box， 黄色移动盒子tool， 放大盒子big-box

 

 

 2.设置css样式：完成基础样式的实现

  

 

 

 

 3.对象获取：获取图片盒子small-box，黄色盒子tool， 大盒子big-box，放大图片bigImg

 

 

 4.通过添加鼠标事件完善界面效果：这里添加了鼠标进入与鼠标离开事件表现黄色区域tool和盒子的显现与否

 设置坐标变量x,y分别在水平坐标轴与垂直坐标轴上完成当前坐标与盒子二分之一坐标值的差值

5。条件判断

 

 

 6.细节完善：通过设置边界完善界面，以防偏移出盒子

 

 

 7.把x y赋值给left top

 

 

 8.因为放大的框是黄色框的两倍所以移动的时候黄色框在图片中移动一像素放大框中的就会移动两像素，所以乘以二；黄色框向右移动放大框向左移动，移动方向是相反的所以加负号。

 

 9.最终效果实现代码：