基于javascript实现放大镜特效

本文实例为大家分享了javascript实现放大镜特效的具体代码，供大家参考，具体内容如下

我们在逛pc端商城时，鼠标放到商品上经常会看到一个类似放大镜效果的蒙层，

 
 
 
  * {
   margin: 0px;
   padding: 0px;
  }
  
  #min {
   width: 350px;
   height: 350px;
   border: 1px solid #ccc;
   position: absolute;
   left: 50px;
   top: 50px;
  }
  
  #min img {
   width: 350px;
   height: 350px;
  }
  
  #max {
   width: 500px;
   height: 500px;
   position: absolute;
   left: 500px;
   top: 50px;
   border: 1px solid #ccc;
   overflow: hidden;
   display: none;
  }
  
  #max img {
   position: absolute;
   left: 0;
   top: 0;
  }
  
  #mask {
   width: 200px;
   height: 200px;
   background: rgba(255, 0, 0, 0.5);
   position: absolute;
   left: 0px;
   top: 0px;
   cursor: pointer;
   display: none;
  }
 



 
  
  
 
 
  
 
 

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。