js 点击图片实现查看大图
- 点击图片放大缩小（遮罩）
截图：点击放大，并显示ico放大镜
代码如下：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>点击图片放大缩小（遮罩）</title><styletype="text/css"><style type="text/css">
.min{max-height:25px;}.showImg{cursor: zoom-in;}#bigImg{cursor: zoom-out;}</style></style></head><body><!-- 我图片是放在一个td里面的（当然还有其它内容...）--><table><td><imgid="showImg"class="showImg min"src="phpcms问题统计/QQ截图20210609140112.png"width="200"/></td><td><imgid="showImg"class="showImg min"src="phpcms问题统计/QQ截图20210609140342.png"width="200"/></td><td><imgid="showImg"class="showImg min"src="phpcms问题统计/QQ截图20210609142248.png"width="200"/></td><td><imgid="showImg"class="showImg min"src="phpcms问题统计/QQ截图20210609160600.png"width="200"/></td><td><imgid="showImg"class="showImg min"src="phpcms问题统计/QQ截图20210609160901.png"width="200"/></td></table><!-- 遮罩区域（先将div隐藏）--><divid="back-curtain"style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.5);z-index:998;width:100%;display:none;"><!--放大后的图片--><divid="imgDiv"style="position:absolute;"><imgid="bigImg"src=""/></div></div><scriptsrc="js/jquery-1.11.1.min.js"></script><scripttype="text/javascript">// 图片点击放大$('.showImg').on('click',function(){imgShow("#imgDiv","#bigImg",$(this),"#back-curtain");});functionimgShow(imgDiv, bigImg, _this, curtain){// 图片路径var src = _this.attr("src");$(bigImg).attr("src", src);// 加载图片,获取当前点击图片的真实大小$("<img/>").attr("src", src).load(function(){var windowWidth =$(window).width();var windowHeight =$(window).height();var realWidth =this.width;var realHeight =this.height;var imgWidth, imgHeight;var scale =0.8;if(realHeight > windowHeight * scale){
imgHeight = windowHeight * scale;
imgWidth = imgHeight / realHeight * realWidth;if(imgWidth > windowWidth * scale){
imgWidth = windowWidth * scale;}}elseif(realWidth > windowWidth * scale){
imgWidth = windowWidth * scale;
imgHeight = imgWidth / realWidth * realHeight;}else{
imgWidth = realWidth;
imgHeight = realHeight;}$(bigImg).css({'width':imgWidth});//计算图片与窗口左边距var left =(windowWidth - imgWidth)/2;//计算图片与窗口上边距 var top =(windowHeight - imgHeight)/2;// 图片位置$(imgDiv).css({'top':top,'left':left});// 图片淡入$(curtain).fadeIn("fast");// 遮罩效果$(curtain).css({'position':'fixed','overflow-y':'auto','width':'100%','height':'100%','z-index':'998'}).show();});// 点击图片或遮罩，图片淡出$(curtain).on('click',function(){$(this).fadeOut("fast");});}</script></body></html>
本文转载自: https://blog.csdn.net/qq_35393869/article/details/128509051
版权归原作者 草巾冒小子 所有， 如有侵权，请联系我们删除。
版权归原作者 草巾冒小子 所有， 如有侵权，请联系我们删除。