CSS中的简易灯箱画廊是一个非常实用的功能,它可以让我们在网页上展示大图或者图片集合。下面我们就来介绍一下如何实现这个功能。
/* HTML部分 *//* CSS部分 */ /* 设置弹出层 */ .popup{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); display: none; justify-content: center; align-items: center; } /* 设置图片大小 */ .popup img{ max-width: 90%; max-height: 90%; margin: auto; display: block; } /* 设置关闭按钮 */ .close{ color: white; position: absolute; top: 15px; right: 25px; font-size: 35px; font-weight: bold; cursor: pointer; } /* JS部分 */ var gallery = document.getElementsByClassName('gallery'); var popup = document.getElementsByClassName('popup')[0]; var close = document.getElementsByClassName('close')[0]; // 给图片添加点击事件 for(var i = 0; i< gallery.length; i++){ gallery[i].addEventListener('click', function(){ popup.style.display = 'flex'; popup.children[0].src = this.src; }) } // 给关闭按钮添加点击事件 close.addEventListener('click', function(){ popup.style.display = 'none'; })
上面的代码中,首先我们在HTML部分加载了一些图片,并用CSS设置了弹出层、图片大小和关闭按钮的样式。在JS部分中,我们给每张图片添加了一个点击事件,当点击某张图片时,弹出层就会展示并显示出点击的图片,最后在关闭按钮上也添加了点击事件,以便用户能够关闭弹出层。
总的来说,实现CSS中的简易灯箱画廊还是比较简单的,只需要一些JS事件和一些CSS样式就可以达到我们想要的效果。