body div js 放大图片_js点击图片传给一个空的div内放大显示

ul li img{

width: 200px;

height: 200px;

}

li{

list-style: none;

float: left;

}

.amplification{

z-index: 999;

width: 100%;

height: 100%;

position: fixed;

top: 0px;

left: 0px;

background: rgba(0, 0, 0, .3);

display: none;

}

.amplification img{

width: 800px;

height: 100%;

position: fixed;

left: 50%;

top: 50%;

box-shadow: 0px 0px 20px #ddd;

/* z-index: 9999; */

transform: translate(-50%, -50%);

}

html部分

js部分

var imgs=document.querySelector('.huanfu').querySelectorAll('img');

var amplification=document.querySelector('.amplification');

var bj=document.querySelector('.bj');

//先获取ul下面的img标签还有点击放大后的阴影部分以及放大后的图片

for (var i = 0; i < imgs.length; i ) {//遍历所有的li下面的img图片

imgs[i].οnclick=function(){//给每一个imgs添加一个点击事件

amplification.style.display='block'//点击后先将之前css内隐藏的图片显示出来

bj.src=this.src;//随后将imgs内每一张遍历出来的图片依次赋值给一个空的img标签

}

}

amplification.οnclick=function(){

amplification.style.display='none'//该部分是放大后点击任意部分都将放大的图片以及阴影部分隐藏掉

}

本文来源于网络：查看 >https://www.cnblogs.com/luobou/p/13451390.html