位置: IT常识 - 正文
js 点击图片实现查看大图(js点击图片跳转页面)
发布时间：2024-01-13js 点击图片实现查看大图 js 点击图片实现查看大图点击图片放大缩小（遮罩）截图：点击放大，并显示ico放大镜
本文链接地址:https://www.jiuchutong.com/zhishi/294467.html
转载请保留说明！
推荐整理分享js 点击图片实现查看大图(js点击图片跳转页面)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js点击图片更换图片,js点击图片让图片放大显示,js点击图片跳转页面,js点击图片跳转页面,js点击图片跳转页面,js 点击图片实现快捷键,js 点击图片实现动画效果,js点击图片实现播放音乐,内容如对您有帮助，希望把文章链接给更多的朋友！
代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>点击图片放大缩小（遮罩）</title><style type="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><img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609140112.png" width="200"/></td><td><img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609140342.png" width="200"/></td><td><img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609142248.png" width="200"/></td><td><img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609160600.png" width="200"/></td><td><img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609160901.png" width="200"/></td></table><!-- 遮罩区域（先将div隐藏）--><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;"><!--放大后的图片--><div id="imgDiv" style="position:absolute;"><img id="bigImg" src="" /></div></div><script src="js/jquery-1.11.1.min.js"></script><script type="text/javascript">// 图片点击放大$('.showImg').on('click', function(){imgShow("#imgDiv", "#bigImg", $(this), "#back-curtain");});function imgShow(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;}} else if (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>上一篇：基于ROS的SLAM建图、自动导航、避障（冰达机器人）(ros算法)
下一篇：安装tensorflow的GPU版本（详细图文教程）--CUDA11.6的安装(安装tensorflow1)
