html电子相册代码
时间: 2023-06-30 18:27:22 浏览: 125
以下是一个简单的HTML电子相册的示例代码,您可以参考并根据自己的需求进行修改:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Photo Album</title>
<style>
/* 相册样式 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.photo {
width: 200px;
height: 200px;
margin: 10px;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
/* 弹出框样式 */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
display: none;
align-items: center;
justify-content: center;
}
.modal-content {
background-color: white;
padding: 20px;
max-width: 80%;
max-height: 80%;
overflow: auto;
text-align: center;
}
.close {
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="photo" style="background-image: url('photo1.jpg');" onclick="showModal(this.style.backgroundImage)"></div>
<div class="photo" style="background-image: url('photo2.jpg');" onclick="showModal(this.style.backgroundImage)"></div>
<div class="photo" style="background-image: url('photo3.jpg');" onclick="showModal(this.style.backgroundImage)"></div>
<div class="photo" style="background-image: url('photo4.jpg');" onclick="showModal(this.style.backgroundImage)"></div>
<div class="photo" style="background-image: url('photo5.jpg');" onclick="showModal(this.style.backgroundImage)"></div>
<div class="photo" style="background-image: url('photo6.jpg');" onclick="showModal(this.style.backgroundImage)"></div>
</div>
<div class="modal" onclick="hideModal()">
<div class="modal-content">
<span class="close">×</span>
<img src="" id="modal-img">
</div>
</div>
<script>
/* 弹出框函数 */
function showModal(imageUrl) {
document.getElementById("modal-img").src = imageUrl.slice(5, -2);
document.querySelector(".modal").style.display = "flex";
}
function hideModal() {
document.querySelector(".modal").style.display = "none";
}
</script>
</body>
</html>
```
以上代码实现了一个简单的电子相册,包含了多张图片和弹出框的功能。您可以将这段代码保存为HTML文件并在浏览器中打开,即可查看效果。另外,您需要将代码中的图片路径替换为您自己的图片路径,才能正确显示相册图片。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)