点击放大图片预览

概述创造一个自适应的盒子，跟随浏览器宽高，目的是不覆盖body元素 css部分   #box{ justify-content: center; align-items: center; position: absolute; display: none; top:0px; left: 0; z-index: 15; }

创造一个自适应的盒子，跟随浏览器宽高，目的是不覆盖body元素

CSS部分  

#Box{				justify-content: center;				align-items: center;				position: absolute;				display: none;				top:0px;				left: 0;				z-index: 15;			}			#Box span{				position: absolute;				top:110px;				right:22px;				color: white;				Font-size: 30px;							}

　　HTML部分

	<div ID="Box">		<span ID="close">关闭</span>	</div>
<div ID="imgBox"><img src="img/leaveform.png" ID="theimg" 200px"/>
<div>

　　Js 部分生成自适应盒子 图片元素填入盒子，点击关闭隐藏并还原图片

	var theimg=document.getElementByID(‘theimg‘);        theimg.ontouchstart=function(){  	        var winHeight=window.innerHeight;		var winWIDth=window.innerWIDth;		        	var BoxObj=document.getElementByID(‘Box‘);   //获取盒子对象 	        	BoxObj.style.wIDth=winWIDth+‘px‘;  //生成宽度        	BoxObj.style.height=winHeight+‘px‘;//生成高度                BoxObj.style.backgroundcolor=‘#929292‘//添加背景色                BoxObj.style.display=‘flex‘ //显示并d性布局                this.style.wIDth=(BoxObj.offsetWIDth-100)+‘px‘; //设置当前图片宽度                this.style.height=(BoxObj.offsetHeight-400)+‘px‘;//设置当前图片高度        	$(‘#Box‘).append(this) //填入元素        	}/*关闭灯箱*/	     $(‘#close‘).click(function(){	     	$(‘#Box‘).hIDe()	     	theimg.style.wIDth=269+‘px‘; //还原	     	theimg.style.height=240+‘px‘;	        $("#imgBox").append(theimg);	     })	

　　若是多张图片可用for循环遍历元素自行改造

总结

以上是内存溢出为你收集整理的点击放大图片预览全部内容，希望文章能够帮你解决点击放大图片预览所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。