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'//該部分是放大後點擊任意部分都將放大的圖片以及陰影部分隱藏掉
}

 

 

 

 

 

964403045能夠加qq羣一塊兒討論問題