js实现详情页放大镜效果

本文实例为大家分享了js实现详情页放大镜的具体代码，供大家参考，具体内容如下

1.html

2.css

      *{
 margin:0;padding:0;
      }
      #small{
 width:400px;
 height:400px;
 position:relative;
 box-shadow: 0 0 5px #000;
      }
      #small img{
 
 width:100%;
 height:100%;
      }
      #frame{
 width:100px;
 height:100px;
 position:absolute;
 box-shadow:0 0 5px #000;
 top:0;
 left:0;
 
 display: none;
 
 
 background: url(img/timg.jpg) no-repeat 0 0;
 
 background-size: 400px 400px ;
      }
      #big{
 width:400px;
 height:400px;
 position:relative;
 box-shadow: 0 0 5px #000;
 
 overflow: hidden;
 
 display: none;
      }
      #big img{
 width:1600px;
 height:1600px;
 position: absolute;
 left: 0;
 top:0;
      }
      
      #big,#small{
 margin-left: 100px;
 float: left;
      }
      #mo{
 
 width:100%;
 height:100%;
 z-index: 999;
 position: absolute;
      }

3.js

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