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部分

<ul class="huanfu">
<li><img src="01.jpg" ></li>
<li><img src="02.jpg" ></li>
<li><img src="03.jpg" ></li>
<li><img src="04.jpg" ></li>
</ul>
<div class="amplification">
<img src="01.jpg" class="bj">
</div>

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].onclick=function(){//给每一个imgs添加一个点击事件
amplification.style.display='block'//点击后先将之前css内隐藏的图片显示出来
bj.src=this.src;//随后将imgs内每一张遍历出来的图片依次赋值给一个空的img标签
}
}
amplification.onclick=function(){
amplification.style.display='none'//该部分是放大后点击任意部分都将放大的图片以及阴影部分隐藏掉
}

转载请标明出处