JavaScript实现放大镜效果代码示例

Javascript实现放大镜效果：

  
  
  
  
    .smallBgImg {
      width: 350px;
      height: 350px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      background-clip: padding-box;
      float: left;
      position: relative;
      cursor: pointer;
    }

    .move {
      border: 1px solid #ccc;
      box-sizing: border-box;
      background: rgba(165, 201, 66, 0.5);
      position: absolute;
      left: 0;
      top: 0;
    }

    .bigBgImg {
      width: 540px;
      height: 540px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      background-clip: padding-box;
      float: left;
      margin-left: 10px;
    }

    .hidden {
      display: none;
    }
  



  
    

    
  
  

  
  




index.html

效果展示：

代码中的大图片和小图片要自己找，并且替换掉代码中的图片路径。

做放大镜效果做重要的一点是，要找到黄色移动块、小图、部分大图、大图，这四个之间的比例尺

黄色移动块 /小图 = 部分大图 / 大图

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