js图片放大镜实例讲解(必看篇)

1、图片放大镜的思路：

当打开页面时只有图片

首先，说一下基本效果和调理，图片放大镜，也就是当你鼠标移入当前的商品图片时，会出现一个小灰色的观察移动框，有点会出现一个对应部位的放大的图片。

然后当鼠标移动时，右边的放大镜会出现对应部位的放大图片

最后当鼠标移开后，小的观察框和放大的图片都会消失。

2、有了基本思路就看代码

  
    
    
    
      #small{
 width: 300px;
 height: 300px;
 border: 1px solid firebrick;
 float: left;
 position: relative;
      }
      #small img{
 width: 100%;
 height: 100%;
  
      }
      #mask{
 width: 100px;
 height: 100px;
 background: rgba(0,0,0,0.3);
 position: absolute;
 top: 0;
 left: 0;
 display: none;
      }
      #big{
 width: 300px;
 height: 300px;
 border: 1px solid hotpink;
 overflow: hidden;
 float: left;
 margin-left: 50px;
 position: relative;
 display: none;
      }
      #big img{
 position: absolute;
      }
    
    
  
  
    
      
      
    
    
      
    
  

还有什么更好的方法互相交流

以上这篇js图片放大镜实例讲解(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。