纯JS的图片双击放大（自适应）再点击缩小功能

最新推荐文章于 2024-08-21 23:57:05 发布

Rich是个小白

最新推荐文章于 2024-08-21 23:57:05 发布

阅读量1.3k

点赞数

分类专栏：工具包文章标签： js html css jquery

本文链接：https://blog.csdn.net/weixin_43739125/article/details/109384458

版权

工具包专栏收录该内容

40 篇文章 1 订阅

订阅专栏

这段代码展示了如何使用JavaScript实现图片预览功能，当用户点击小图时，弹出一个大图预览窗口，并根据屏幕尺寸进行适配。如果图片链接指向word或excel文件，会显示相应的下载提示。代码还包含了图片循环展示和关闭预览窗口的交互逻辑。

摘要由CSDN通过智能技术生成

直接上代码

js代码

imgShow = function(_this){
		var outerdiv = "#outerdiv";
		var innerdiv = "#innerdiv";
		var bigimg = "#bigimg";
		var src = _this.attributes.src.nodeValue;
		if(src=="/jldbs/jldbs/miniprogram/workaccept/images/word.png"){
		  $.Msg.alert('提示', '下载word文件');
		  return;
		}
		if(src=="/jldbs/jldbs/miniprogram/workaccept/images/excel.png"){
		  $.Msg.alert('提示', '下载excel文件');
		  return;
		}
		$(bigimg).attr("src",src);
		$("<img/>").attr("src",src).load(function(){
			var windowW = $(window).width();
			var windowH = $(window).height();
			var realWidth = this.width;
			var realHeight = this.height;
			var imgWidth,imgHeight;
			var scale = 0.8;
			if(realHeight>windowH*scale){
				imgHeight = windowH*scale;
				imgWidth = imgHeight/realHeight*realWidth;
				if(imgWidth>windowW*scale){
					imgWidth = windowW*scale;
				}
			}else if(realWidth>windowW*scale){
				imgWidth = windowW*scale;
				imgHeight = imgWidth/realWidth*realHeight;
			}else{
				imgWidth = realWidth;
				imgHeight = realHeight;
			}
			$(bigimg).css("width",imgWidth);
			$(bigimg).css("height",imgHeight);
			var w = (windowW-imgWidth)/2;
			var h = (windowH-imgHeight)/2;
			$(innerdiv).css({"top":h,"left":w});
			$(outerdiv).fadeIn("fast");
		});
		$(outerdiv).click(function(){
			$(this).fadeOut("fast");
		});
	}

循环图片

success : function(data) {
				var htmlString = "";
				if(data.length > 0){
					for(var i in data){
						htmlString += '<img class="aaaa" onClick="imgShow(this)" src="/file/'+data[i].id+'" height="60px" width="60px" style="float:left;margin-right:39px;"/>';
					}
					$('#imgItems').append(htmlString);
				}
			}

页面图片放置的位置

<div id="imgItems" style="height:70px" ></div>

页面放大后图片的区域位置（body下就行）

<div id="outerdiv" style="position:fixed;top:0;left:0:background:rgba(0.0.0.0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
</div>