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'//该部分是放大后点击任意部分都将放大的图片以及阴影部分隐藏掉 }
转载请标明出处
|