java 点击图片放大_点击放大图片预览

创造一个自适应的盒子，跟随浏览器宽高，目的是不覆盖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部分

关闭

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循环遍历元素自行改造