上传资源得积分
:sj52abcd摘要:HTML5源码,图片特效,图片墙,ImageWall
CSS3和jQuery编写实现的ImageWall——相片墙效果，可在手机上看照片的相片墙图片特效，为了在手机上测试方便，并附有一个APK测试包，你可以拷到手机上看效果。点击任意一张图片后，会显示图片的文字说明信息，并带有动画效果。本图片墙使用了jquery.masonry.min.js、jquery.easing.1.3.js等插件，当然也包括了jquery。
以下是代码：
HTML 代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>手机相片墙效果</title>
<link rel='stylesheet' type='text/css' href='styles.css'>
</head>
<body>
<div id='photo-wall'>
<div class='photo'><img src='photo1.jpg' alt='Photo 1'></div>
<div class='photo'><img src='photo2.jpg' alt='Photo 2'></div>
<div class='photo'><img src='photo3.jpg' alt='Photo 3'></div>
<!-- 添加更多照片div -->
</div>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src='script.js'></script>
</body>
</html>
```
CSS 代码（styles.css）：
```css
#photo-wall {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
.photo {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
margin: 10px;
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.3s;
}
.photo:hover {
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.photo:hover::after {
opacity: 1;
}
.enlarged {
transform: scale(1.5);
z-index: 1;
}
```
JavaScript 代码（script.js）：
```javascript
$(document).ready(function() {
$('.photo').click(function() {
$(this).toggleClass('enlarged');
$(this).siblings().removeClass('enlarged');
});
});
```
