点击图片放大缩小(遮罩)
前言
想通过js做一个点击图片,将图片放大到屏幕中间,并遮罩其他地方,再点击图片或遮罩部分,还原图片的功能。
1.创建div用于放置放大后的图片和遮罩区域
代码如下(示例):
1 <!-- 我图片是放在一个td里面的(当然还有其它内容...)--> 2 <table> 3 ... 4 <td> 5 <img id="showImg" class="showImg min" src="111.png"/> 6 </td> 7 ... 8 </table> 9 <!-- 遮罩区域(先将div隐藏)--> 10 <div id="back-curtain" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.5);z-index:998;width:100%;display:none;"> 11 <!--放大后的图片--> 12 <div id="imgDiv" style="position:absolute;"> 13 <img id="bigImg" src="" /> 14 </div> 15 </div>
2.设置图片最大高度(根据自己要求)
代码如下(示例):
1 <style type="text/css"> 2 .min { 3 max-height:25px; 4 } 5 </style>
3.通过js控制放大位置
代码如下(示例):
1 // 图片点击放大 2 $('.showImg').on('click', function(){ 3 imgShow("#imgDiv", "#bigImg", $(this), "#back-curtain"); 4 }); 5 6 function imgShow(imgDiv, bigImg, _this, curtain) { 7 // 图片路径 8 var src = _this.attr("src"); 9 $(bigImg).attr("src", src); 10 // 加载图片,获取当前点击图片的真实大小 11 $("<img/>").attr("src", src).load(function(){ 12 var windowWidth = $(window).width(); 13 var windowHeight = $(window).height(); 14 var realWidth = this.width; 15 var realHeight = this.height; 16 var imgWidth, imgHeight; 17 var scale = 0.8; 18 if (realHeight > windowHeight * scale) { 19 imgHeight = windowHeight * scale; 20 imgWidth = imgHeight / realHeight * realWidth; 21 if (imgWidth > windowWidth * scale) { 22 imgWidth = windowWidth * scale; 23 } 24 } else if (realWidth > windowWidth * scale) { 25 imgWidth = windowWidth * scale; 26 imgHeight = imgWidth / realWidth * realHeight; 27 } else { 28 imgWidth = realWidth; 29 imgHeight = realHeight; 30 } 31 $(bigImg).css({'width':imgWidth}); 32 //计算图片与窗口左边距 33 var left = (windowWidth - imgWidth) / 2; 34 //计算图片与窗口上边距 35 var top = (windowHeight - imgHeight) / 2; 36 // 图片位置 37 $(imgDiv).css({'top':top, 'left':left}); 38 // 图片淡入 39 $(curtain).fadeIn("fast"); 40 // 遮罩效果 41 $(curtain).css({ 42 'position':'fixed', 43 'overflow-y':'auto', 44 'width':'100%', 45 'height':'100%', 46 'z-index':'998' 47 }).show(); 48 }); 49 // 点击图片或遮罩,图片淡出 50 $(curtain).on('click', function(){ 51 $(this).fadeOut("fast"); 52 }); 53 }
实际效果
初始(示例):
点击放大(示例):
点击还原(示例):