原生js实现放大镜

原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视觉、原理和代码上是相反的）；所谓放大，其实就是一张原本就很小的图对应一张原本就很大的图。

  
  
  
    *{
      margin:0;
      padding:0;
    }
    .small{
      width: 400px;
      height: 400px;
      position: relative;
      background: url(http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=7dca2c442134be6a652e087296c8ac80) no-repeat center;
      border: 1px solid #ccc;
    }
    .small .inner{
      width: 100px;
      height: 100px;
      background: yellow;
      opacity: 0.5;
      filter: alpha(opacity=50);
      position: absolute;
      left:0;
      top:0;
      display: none;
    }
    .big{
      width: 400px;
      height: 400px;
      position: absolute;
      left:410px;
      top:0;
      overflow: hidden;
      border: 1px solid #ccc;
      display: none;
    }
    .big img{
      width: 200%;
      height: 200%;
      position: absolute;
      left:0;
      top:0;
    }
  



  


  

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！