前端必学——实现电商图片放大镜效果（附代码）

放大镜可以说是前端人必须学会的程序之一,今天的案例为大家展示一下怎么实现放大镜的效果！

效果图展示****

  整个效果就是当鼠标放到展示图上的时候，会出现一个遮罩层以及弹出来一个框展示一个详情图，并且鼠标移动的时候详情图跟着移动，鼠标离开详情图消失。

HTML代码：****

#small{     width: 500px;     height: 312px;     position: absolute;     left: 20px;     top: 20px; } #pic1{     position: absolute;     left: 0px;     top: 0px; } #pic1 img{     width: 100%;     height: 100%; } #big{     width: 200px;     height: 200px;     position: absolute;     left: 550px;     top: 50px;     border: 1px solid blue;     overflow: hidden; } #pic2{     width: 1000px;     height: 625px;     position: absolute;     left: 0;     top: 0; } #pic2 img{     width: 100%;     height: 100%; } #mask{     width: 100px;     height: 100px;     background: black;     opacity: 0.3;/*让遮罩层看起来透明*/     filter: alpha(opacity = 30);/*兼容不同的浏览器*/     position: absolute;     display: none; }