图片放大预览功能

一、普通的图片放大功能

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');
    });
}