一、普通的图片放大功能
1、html
<div class="uploadImg"> <img src="" class="exsectionImg" /> <img src="" class="exsectionImg" /> </div>
<!--遮罩层-->
<div class="ansMasklayer"></div>
2、css
//默认图片样式 .exsectionImg { width: 1.96rem; height: 1.96rem; margin-right: 0.5rem; } //放大后的图片样式 .imgMaskShow { z-index: 10; position: fixed; top: 50%; left: 0; margin-top: -126px; width: 100%; height: 252px; } //遮罩层样式 .ansMasklayer { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: #363636; display: none; }
3、js
//图片的放大
var exsectionImgItem = $('.exsectionImg');
//默认图片点击时切换样式 $('.exsectionImg').on('click',function() { for(var i=0; i<exsectionImgItem.length; i++) { $('.ansMasklayer').hide(); //移除放大的样式,添加默认图片样式 $(exsectionImgItem[i]).removeClass('imgMaskShow').addClass('exsectionImg'); } $(this).show(); $(this).removeClass('exsectionImg').addClass('imgMaskShow'); $('.ansMasklayer').show(); }); //点击遮罩层关闭 $('.ansMasklayer').click(function() { $(this).hide(); $(exsectionImgItem).removeClass('imgMaskShow').addClass('exsectionImg'); });
二、封装的图片放大功能
1、存放图片的位置(html)
<div id="uploadImg"></div> //存放图片的位置
2、获取后台图片(js)
//判断图片是否存在,存在 获取后台图片 if(data[0].images != "") { var arr=data[0].images.split(","); $("#uploadImg").html(""); var str=""; for(var i=0; i<arr.length; i++) { str+="<img alt='' class='exsectionImg' onclick=picZoom(this) src='"+urllogo+arr[i]+"'>"; } $("#uploadImg").html(str);
}
3、封装的图片放大功能(js)
//详情页图片的放大缩小 function picZoom(obj) { $(obj).show(); $(obj).removeClass('exsectionImg').addClass('imgMaskShow'); $('.ansMasklayer').show(); //点击遮罩层关闭 clickPic(obj); } function clickPic(objs) { $('.ansMasklayer').click(function() { $(this).hide(); $(objs).removeClass('imgMaskShow').addClass('exsectionImg'); }); }