炫酷图片放大切换效果

原创已于 2025-06-27 13:51:38 修改 · 733 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-30 14:02:13 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷图片放大切换效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: #f5f5f5;
overflow-x: hidden;
}

.gallery-container {
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
}

h1 {
text-align: center;
margin-bottom: 40px;
color: #333;
font-size: 2.5em;
}

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
}

.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 200px;
cursor: pointer;
}

.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.gallery-item:hover img {
transform: scale(1.1);
}

.gallery-item .overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 15px;
transform: translateY(100%);
transition: transform 0.3s ease;
}

.gallery-item:hover .overlay {
transform: translateY(0);
}

.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.lightbox.active {
opacity: 1;
pointer-events: all;
}

.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
}

.lightbox-content img {
max-width: 100%;
max-height: 80vh;
display: block;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
transform: scale(0.8);
opacity: 0;
transition: all 0.4s ease;
}

.lightbox.active .lightbox-content img {
transform: scale(1);
opacity: 1;
}

.close-btn {
position: absolute;
top: 20px;
right: 20px;
color: white;
font-size: 30px;
cursor: pointer;
z-index: 1001;
}

.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 40px;
cursor: pointer;
z-index: 1001;
background: rgba(0, 0, 0, 0.5);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.prev-btn {
left: 20px;
}

.next-btn {
right: 20px;
}

.credit {
text-align: center;
margin-top: 30px;
color: #666;
font-size: 14px;
}

.credit a {
color: #333;
text-decoration: none;
}

/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.gallery-item {
animation: fadeIn 0.5s ease forwards;
}

.gallery-item:nth-child(1) { animation-delay: 0.1s; }
.gallery-item:nth-child(2) { animation-delay: 0.2s; }
.gallery-item:nth-child(3) { animation-delay: 0.3s; }
.gallery-item:nth-child(4) { animation-delay: 0.4s; }
.gallery-item:nth-child(5) { animation-delay: 0.5s; }
.gallery-item:nth-child(6) { animation-delay: 0.6s; }
</style>
</head>
<body>
<div class="gallery-container">
<h1>炫酷图片画廊</h1>

<div class="gallery">
<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?nature=1" alt="自然风景1">
<div class="overlay">
<h3>美丽自然</h3>
<p>探索大自然的奇妙之处</p>
</div>
</div>

<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?nature=2" alt="自然风景2">
<div class="overlay">
<h3>山水之间</h3>
<p>感受山水之间的宁静</p>
</div>
</div>

<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?city=1" alt="城市风光1">
<div class="overlay">
<h3>城市之光</h3>
<p>现代都市的繁华景象</p>
</div>
</div>

<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?city=2" alt="城市风光2">
<div class="overlay">
<h3>都市夜景</h3>
<p>灯火辉煌的城市夜晚</p>
</div>
</div>

<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?animal=1" alt="动物1">
<div class="overlay">
<h3>野生动物</h3>
<p>野生动物的精彩瞬间</p>
</div>
</div>

<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?animal=2" alt="动物2">
<div class="overlay">
<h3>可爱宠物</h3>
<p>人类最好的朋友</p>
</div>
</div>
</div>


</div>


<div class="lightbox">
<span class="close-btn">×</span>
<span class="nav-btn prev-btn"><</span>
<span class="nav-btn next-btn">></span>
<div class="lightbox-content">
<img src="" alt="">
</div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
// 当前显示的图片索引
let currentIndex = 0;
const images = [];

// 收集所有图片
$('.gallery-item img').each(function() {
images.push($(this).attr('src'));
});

// 点击图片打开灯箱
$('.gallery-item').click(function() {
currentIndex = $(this).index();
const imgSrc = $(this).find('img').attr('src');
$('.lightbox-content img').attr('src', imgSrc);
$('.lightbox').addClass('active');
});

// 关闭灯箱
$('.close-btn').click(function() {
$('.lightbox').removeClass('active');
});

// 上一张
$('.prev-btn').click(function(e) {
e.stopPropagation();
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateLightboxImage();
});

// 下一张
$('.next-btn').click(function(e) {
e.stopPropagation();
currentIndex = (currentIndex + 1) % images.length;
updateLightboxImage();
});

// 键盘导航
$(document).keydown(function(e) {
if ($('.lightbox').hasClass('active')) {
if (e.key === 'Escape') {
$('.lightbox').removeClass('active');
} else if (e.key === 'ArrowLeft') {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateLightboxImage();
} else if (e.key === 'ArrowRight') {
currentIndex = (currentIndex + 1) % images.length;
updateLightboxImage();
}
}
});

// 更新灯箱图片
function updateLightboxImage() {
$('.lightbox-content img')
.css('transform', 'scale(0.8)')
.css('opacity', 0);

setTimeout(() => {
$('.lightbox-content img')
.attr('src', images[currentIndex])
.css('transform', 'scale(1)')
.css('opacity', 1);
}, 300);
}

// 点击灯箱背景关闭
$('.lightbox').click(function(e) {
if (e.target === this) {
$(this).removeClass('active');
}
});
});
</script>
</body>
</html>