jquery 图片点击放大预览功能详解

    <div>
        <div><img src="" ></div>
        <div><img src="" ></div>
        <div><img src="" ></div>
        <div><img src="" ></div>
    </div>

<div></div>    
    <div>
        <div>×</div>
        <div>
            <ul >
            </ul>
        </div>
        <div>
            <div>«</div>
            <div>»</div>
        </div>
    </div>

.seeImg_mask{ width:100%; height: 100%; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; background: rgba(null,0,0,0.7); margin: auto; z-index: 999; display: none; }  
    .seeImg_popup{  width: 80%; height: 80%; background: #fff; position: fixed;  bottom: 200%; left: 10%; right: 0px; margin: auto; border: 10px rgba(null,0,0,0.2) solid; border-radius: 10px; z-index: 9999;  }  
    .seeImg_close{ width: 40px; height: 40px; line-height: 35px; text-align: center; font-size: 28px; color: #fff; position: absolute; right: 0px; top: 0px; background: rgba(null, 36, 36, 0.72); cursor: pointer;  }
    .seeImg_swrieb{ width: 90%; height: 100%; margin: 0px auto; position: relative; overflow: hidden;  }
    .seeImg_list{ height: 100%; width: auto; display: flex; flex-direction: row; transition: all 0.5s; }
    .seeImg_list li{ height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden;  }
    .seeImg_list li img{
        height: 90%;display: block;position: absolute; top: -160px;cursor: all-scroll;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently not supported by any browser */
        padding: 200px 0px;
        z-index: 555;
    }
    .seeImg_fun{ width: 100%; height: 40px; line-height: 40px; display: flex; flex-direction: row; justify-content: space-between; box-sizing: border-box; padding: 0px 15px; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto;   }
    .fun_label{ font-size: 50px; color: #777;  cursor: pointer;   -webkit-touch-callout: none;  -webkit-user-select: none; -khtml-user-select: none;  -moz-user-select: none; -ms-user-select: none; user-select: none; }

$(document).on("click",".seeimg",function(){
        $(".seeImg_list li").remove();
        var seeImglistLiLeng = $(this).parents(".imgnyr").children(".img-list").length;
        $(".seeImg_popup").attr("data",seeImglistLiLeng)
        var arrtimg = [];
        $(this).parents(".imgnyr").children(".img-list").each(function(i){
            var imgse = $(this).children("img").attr("src");
            arrtimg.push(imgse)
        });
        for( var i in arrtimg){
            var html ="";
                html +="<li><img src=" +arrtimg[i]+ " class='enlarge' draggable='false' onmousewheel='return bbimg(this)'  /></li>";
            $(".seeImg_list").append(html)
        }
        var seeImgswriebWight = $(".seeImg_swrieb").width();
        var seeImglistWigth = seeImgswriebWight * seeImglistLiLeng;
        console.log(seeImglistWigth)
        $(".seeImg_mask").show();
        $(".seeImg_popup").css("bottom","10%");
        $(".seeImg_list").width(seeImglistWigth)
        $(".seeImg_list").css("margin-left","0px")
        $(".seeImg_list li").width(seeImgswriebWight)
        $(".seeImg_list").children("li").each(function(i){
            $(this).children("img").attr("data",i)
            $(this).children("img").addClass("maxdom"+i)
        })
    })
    $(document).on("click",".seeImg_close",function(){
        $(".seeImg_mask").hide();
        $(".seeImg_popup").css("bottom","200%");    
    })
    var UlMarRig = 0;
    $(document).on("click",".labelRight",function(){
        var roue = $(".seeImg_swrieb").width();
        var mes = $(".seeImg_popup").attr("data");
        var csdx = roue * mes;
        console.log(csdx)
        UlMarRig = UlMarRig - roue;
        if( UlMarRig <= -csdx){
           UlMarRig = 0;
        }
        $(".seeImg_list").css("margin-left", UlMarRig)
    })
    $(document).on("click",".labelLeft",function(){
        var emgd = $(".seeImg_swrieb").width();
        var aas = $(".seeImg_popup").attr("data");
        var ddx = emgd * aas;       
        if( UlMarRig == 0){
           UlMarRig = -ddx;
        }
        UlMarRig = UlMarRig + emgd;
        $(".seeImg_list").css("margin-left", UlMarRig)
    })  
    var ment = 90;
    function bbimg(o){
        var zoom=parseInt(o.style.zoom, 10)||100;
            zoom+=event.wheelDelta/12;
            console.log(zoom)
            if(zoom>=110){
                ment = ment +10;
                o.style.height = ment +'%';
            }
            if(zoom<110){
                ment = ment -10;
                o.style.height = ment +'%';
            }
            // console.log(ment)
    }
    $(document).on("mousedown",".enlarge",function(e){
        var u = $(this).attr("data");
        // e.pageX
        var imtLeft = $(this).position().left;
        var imtTop = $(this).position().top;
        var distenceX = e.pageX - imtLeft;     //记录鼠标点击的位置与div左上角水平方向的距离
        var distenceY = e.pageY - imtTop;     //记录鼠标点击的位置与div左上角数值方向的距离
        $(document).mousemove(function(e){
          var x = e.pageX - distenceX;
          var y = e.pageY - distenceY;
          if(x<0){
            x= x ;
          }else if(x>$(document).width()-$('.maxdom'+u).outerWidth(true)){
            x = $(document).width()-$('.maxdom'+u).outerWidth(true);
          }
          if(y<0){
            y= y;
          }else if(y>$(document).height()-$('.maxdom'+u).outerHeight(true)){
            y = $(document).height()-$('.maxdom'+u).outerHeight(true);
          }
          $('.maxdom'+u).css({'left':x+'px','top':y+'px'});
        });
        $(document).mouseup(function(){
          $(document).off('mousemove'); //移除鼠标移动事件
        });     
    })