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

    <div>
        <div><img src="images/banner.jpg" ></div>
        <div><img src="images/banner.jpg" ></div>
        <div><img src="images/banner.jpg" ></div>
        <div><img src="images/banner.jpg" ></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(0,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(0,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(226, 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'); //移除鼠标移动事件
	    });		
	})