圖片放大預覽功能

一、普通的圖片放大功能

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