原生JS实现简单放大镜效果

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

 
 
 
 
 * {
 margin: 0;
 padding: 0;
 }
 img{
 vertical-align: top;
 }
 .fdj {
 width: 350px;
 height: 350px;
 position: relative;
 margin: 100px auto;
 border: 1px solid gainsboro;
 }
 .small {
 position: relative;
 }
 .small img {
 width: 350px;
 }
 .mask {
 width: 100px;
 height: 100px;
 background: rgba(255, 255, 0, 0.4);
 position: absolute;
 left: 0;
 top: 0;
 cursor: move;
 display: none;
 }
 .big {
 position: absolute;
 top: 0;
 left: 360px;
 width: 500px;
 height: 500px;
 border: 1px solid gainsboro;
 overflow: hidden;
 display: none;
 }
 .big img{
 position: absolute;
 left: 0;
 top: 0;
 }
 
 

 
 
 
 
 
 
 
 
 
 
 
 

效果图：（演示）

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