CSS3 Lightbox缩略图效果(基于CSS3和jQuery滑动特效实例代码)
- 建站教程
- 2024-10-11 18:56:01
CSS3 Lightbox缩略图效果(基于CSS3和jQuery滑动特效实例代码)
基于CSS3制作的lightbox效果，鼠标移到缩略图上，图片变暗，点击后弹出大图，用到了CSS transitions和animations，使图片以独特的方式弹出。
创建一个基于CSS3的lightbox效果，涉及到HTML、CSS和JavaScript。下面是一个简单的示例，展示了如何实现鼠标悬停时图片变暗，点击后弹出大图的效果。
### HTML结构
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lightbox Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<img src="thumbnail.jpg" alt="Thumbnail">
</div>
<div id="lightbox" class="lightbox hidden">
<img src="large.jpg" alt="Large Image">
<span>×</span>
</div>
<script src="script.js"></script>
</body>
</html>
```
### CSS样式
```css
/ styles.css /
.thumbnail-container {
position: relative;
}
.thumbnail {
width: 300px;
transition: filter 0.5s ease;
}
.thumbnail:hover {
filter: brightness(0.5); / 鼠标悬停时图片变暗 /
}
.lightbox {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9); / 背景变暗 /
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.5s ease;
}
.lightbox img {
max-width: 80%;
max-height: 80%;
transition: transform 0.5s ease;
}
.lightbox.hidden {
display: none;
}
.close {
position: absolute;
top: 20px;
right: 40px;
font-size: 40px;
cursor: pointer;
color: #fff;
}
.close:hover {
color: #f44336;
}
```
### JavaScript交互
```javascript
// script.js
document.querySelector('.thumbnail').addEventListener('click', function() {
var lightbox = document.getElementById('lightbox');
lightbox.classList.remove('hidden');
lightbox.style.opacity = '1';
});
document.querySelector('.close').addEventListener('click', function() {
var lightbox = document.getElementById('lightbox');
lightbox.style.opacity = '0';
setTimeout(function() {
lightbox.classList.add('hidden');
}, 500);
});
```
这个示例中，我们创建了一个包含缩略图的容器，当鼠标悬停在缩略图上时，图片会变暗。点击缩略图后，会弹出一个包含大图的lightbox，背景变暗，图片以独特的方式弹出。点击关闭按钮或按Esc键可以关闭lightbox。
请注意，你需要将`thumbnail.jpg`和`large.jpg`替换为实际的图片路径。此外，这个示例使用了简单的CSS过渡效果，你可以根据需要添加更复杂的动画效果。
基于CSS3和jQuery滑动特效，CSS3铅笔画风格的菜单特效，jquery+css3图片拖拽特效，jQuery+CSS3密码强度指示器，
CSS3 Lightbox缩略图效果(基于CSS3和jQuery滑动特效实例代码)由讯客互联建站教程栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“CSS3 Lightbox缩略图效果(基于CSS3和jQuery滑动特效实例代码)”
