JS版图片放大镜效果 JS版图片放大镜效果

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

- 锐客网*{padding:0; margin:0; }.box{position: relative; width:350px; height:510px; margin:auto; }.middle {position: relative; border: 1px solid pink; overflow: hidden; }.hover_ceng{position: absolute; z-index: 1; background: url(./img/bg.png); background-size: 4px 4px; display: none; }.middle >img{width:100%; height:100%; }.small{position: relative; width:350px; height:110px; text-align: center; }.small>span{position: absolute; display:block; top:15px; line-height: 50px; font-size: 20px; width:20px; height:50px; background: #eabcb8; }.small .leftbtn {left: 0; }.small .rightbtn {right: 0; }.small>.list>ul> li{list-style:none ; float:left; width:250px; }.list{width:250px; display:inline-block; text-align: left; overflow: hidden; }.list_ul{width:500px; overflow: hidden; height:auto; transition: all 0.5s linear ; }.small-li{display: inline-block; width:54px; height:58px; margin:10px 0; border:2px solid transparent; }.small-li> img{width:100%; height:100%; }.big{position: absolute; top:0; left:350px; height:400px; width:350px; border:1px solid gainsboro; background-image: url(./img/big8.jpg); /*background-size: 350px 400px; */display: none; /*background-repeat: no-repeat ; */}
文章图片
<

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

>