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