用HTML做一个照片墙有创意加js
时间: 2024-01-29 12:04:28 浏览: 29
好的,我可以为您提供一个简单的HTML照片墙示例,其中包括一些创意和JavaScript功能。
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<style>
/* 照片墙容器 */
.photo-wall {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
margin: 20px;
}
/* 照片卡片 */
.photo-card {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
/* 照片 */
.photo-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
/* 照片放大 */
.photo-card:hover img {
transform: scale(1.2);
}
/* 照片标题 */
.photo-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
font-size: 1.2rem;
text-align: center;
transition: bottom 0.5s ease;
}
/* 照片标题上移 */
.photo-card:hover .photo-title {
bottom: -50px;
}
</style>
</head>
<body>
<div class="photo-wall">
<div class="photo-card">
<img src="photo1.jpg" alt="照片1">
<div class="photo-title">照片1</div>
</div>
<div class="photo-card">
<img src="photo2.jpg" alt="照片2">
<div class="photo-title">照片2</div>
</div>
<div class="photo-card">
<img src="photo3.jpg" alt="照片3">
<div class="photo-title">照片3</div>
</div>
<div class="photo-card">
<img src="photo4.jpg" alt="照片4">
<div class="photo-title">照片4</div>
</div>
<div class="photo-card">
<img src="photo5.jpg" alt="照片5">
<div class="photo-title">照片5</div>
</div>
</div>
</body>
</html>
```
JavaScript部分:
```javascript
// 获取所有照片卡片
const photoCards = document.querySelectorAll('.photo-card');
// 为每个照片卡片添加点击事件
photoCards.forEach(photoCard => {
photoCard.addEventListener('click', () => {
// 创建一个模态框容器
const modalContainer = document.createElement('div');
modalContainer.classList.add('modal-container');
// 创建一个模态框
const modal = document.createElement('div');
modal.classList.add('modal');
// 获取当前照片
const photo = photoCard.querySelector('img');
// 在模态框中显示当前照片
const modalPhoto = document.createElement('img');
modalPhoto.src = photo.src;
modal.appendChild(modalPhoto);
// 创建一个关闭按钮
const closeButton = document.createElement('button');
closeButton.classList.add('close-button');
closeButton.innerHTML = '×';
closeButton.addEventListener('click', () => {
// 关闭模态框
modalContainer.remove();
});
modal.appendChild(closeButton);
// 将模态框添加到模态框容器中
modalContainer.appendChild(modal);
// 将模态框容器添加到body中
document.body.appendChild(modalContainer);
});
});
```
这个示例中,我们使用了Flexbox布局创建了一个照片墙容器,并使用CSS样式创建了照片卡片和照片标题。我们还添加了一些CSS过渡效果,使照片在鼠标悬停时放大,并使照片标题在鼠标悬停时上移。
在JavaScript部分,我们使用querySelectorAll()方法获取所有照片卡片,并使用forEach()方法为每个照片卡片添加了一个点击事件。在事件处理程序中,我们创建了一个模态框容器和一个模态框,并在模态框中显示了当前照片。我们还创建了一个关闭按钮,并在点击时关闭模态框。最后,我们将模态框容器添加到body中。
这个示例只是一个基本的照片墙,您可以根据自己的需要进行修改和扩展。