当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 点击放大图片预览

点击放大图片预览

2019年06月22日  | 移动技术网IT编程  | 我要评论

创造一个自适应的盒子，跟随浏览器宽高，目的是不覆盖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" style="width=200px,height="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' //显示并弹性布局
                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循环遍历元素自行改造

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网