色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css中簡易燈箱畫廊

宋博文1年前7瀏覽0評論

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樣式就可以達到我們想要的效果。