資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用CSS和JavaScript建立選項卡式圖片庫？
網頁上的圖片庫可以以多種形式顯示。其中一種是選項卡式圖片庫。點選圖片庫中的圖片縮圖，圖片就會展開。讓我們看看如何使用HTML和CSS建立一個選項卡式圖片庫。
設定縮圖圖片
在我們的示例中，我們考慮了3張圖片，並使用<img>元素將其新增到網頁中：
<img class="ImgThumbnail" src="https://tutorialspoint.tw/mysql/images/mysql-mini-logo.jpg"/> <img class="ImgThumbnail" src="https://tutorialspoint.tw/sql/images/sql-mini-logo.jpg" /> <img class="ImgThumbnail" src="https://tutorialspoint.tw/sqlite/images/sqlite-mini-logo.jpg"/>
圖片縮圖
當滑鼠游標放在圖片上時，圖片縮圖會顯示為可點選的，因為我們已將游標屬性設定為指標。過渡是使用transition屬性設定的。以下是圖片縮圖的其他樣式：
.ImgThumbnail {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
height: 250px;
width: 250px;
}
建立模態框
點選任何圖片縮圖，圖片都會開啟：
<div class="modal"> <span class="close">×</span> <img class="modalImage" id="img01" /> </div>
模態框的關閉按鈕
點選圖片縮圖時，模態框會開啟。在全尺寸圖片上，還有一個關閉按鈕可以關閉圖片：
<span class="close">×</span>
模態框工作的指令碼
點選圖片縮圖時，事件監聽器將允許顯示圖片。點選關閉按鈕時，相同的模態圖片將關閉，因為它的display屬性設定為none：
<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
</script>
示例
以下是使用CSS和JavaScript生成選項卡式圖片庫的程式碼：
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.ImgThumbnail {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
height: 250px;
width: 250px;
}
.ImgThumbnail:nth-of-type(1) {
margin-left: 20%;
}
.modal {
display: none;
position: relative;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 60%;
overflow: auto;
}
.modalImage {
margin: auto;
display: block;
width: 50%;
height: 60%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.close {
font-weight: bolder;
position: absolute;
right: 25%;
color: #ffffff;
font-size: 40px;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: rgb(255, 0, 0);
cursor: pointer;
}
@media only screen and (max-width: 700px) {
.modalImage {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Image Modal Gallery Example</h1>
<img class="ImgThumbnail" src="https://images.pexels.com/photos/3635300/pexels-photo-3635300.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<img class="ImgThumbnail" src="https://picsum.photos/id/237/536/354.jpg" />
<img class="ImgThumbnail" src="https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<!-- The Modal -->
<div class="modal">
<span class="close">×</span>
<img class="modalImage" id="img01" />
</div>
<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
</script>
</body>
</html>
更新於：2023-12-14
644 次瀏覽
廣告