淘先锋技术网

首页 1 2 3 4 5 6 7

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样式就可以达到我们想要的效果。