数据结构
网络
关系数据库管理系统
操作系统
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.com/mysql/images/mysql-mini-logo.jpg"/> <img class="ImgThumbnail" src="https://tutorialspoint.com/sql/images/sql-mini-logo.jpg" /> <img class="ImgThumbnail" src="https://tutorialspoint.com/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 次浏览
广告