原生js实现放大镜效果

原生js实现放大镜效果

放大镜效果

  1. 鼠标放上去会有半透明小框,右边有局部大图显示,为小框里的图片内容;
  2. 鼠标移动小框跟着移动,右边大图也跟随移动。

放大镜关键原理:鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置;

放大镜的移动方向和大图片的移动方向:横向和纵向都是相反,才可以保证同步。

代码段

html结构样式

css样式


js代码

这里我采用的是使用面向对象的方法实现放大镜效果。


你可能感兴趣的:(前端)