炫酷图片放大切换效果-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148381678

<!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-color: #111;
overflow-x: hidden;
}

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

.gallery-title {
color: #fff;
text-align: center;
margin-bottom: 40px;
font-size: 2.5em;
text-transform: uppercase;
letter-spacing: 3px;
}

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

.gallery-item {
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform 0.3s ease;
aspect-ratio: 16/9;
}

.gallery-item:hover {
transform: translateY(-10px);
}

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

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

.gallery-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
color: white;
transform: translateY(100%);
transition: transform 0.3s ease;
}

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

.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: 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: auto;
}

.lightbox-image {
max-width: 90%;
max-height: 90%;
transform: scale(0.8);
transition: transform 0.3s ease;
}

.lightbox-image.zoom {
transform: scale(1);
}

.lightbox-close {
position: absolute;
top: 20px;
right: 20px;
color: white;
font-size: 30px;
cursor: pointer;
transition: transform 0.3s ease;
}

.lightbox-close:hover {
transform: rotate(90deg);
}

.lightbox-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 20px;
transform: translateY(-50%);
}

.lightbox-button {
color: white;
font-size: 40px;
cursor: pointer;
background: rgba(0, 0, 0, 0.5);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}

.lightbox-button:hover {
background: rgba(255, 255, 255, 0.3);
}

.ad-section {
text-align: center;
margin: 30px 0;
padding: 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}

.ad-section a {
color: #4CAF50;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<div class="gallery-container">
<h1 class="gallery-title">炫酷图片画廊</h1>



<div class="gallery">
<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?nature=1" alt="Nature 1" class="gallery-image">
<div class="gallery-caption">
<h3>自然风光 1</h3>
<p>美丽的自然景观</p>
</div>
</div>
<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?nature=2" alt="Nature 2" class="gallery-image">
<div class="gallery-caption">
<h3>自然风光 2</h3>
<p>壮丽的山川河流</p>
</div>
</div>
<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?city=1" alt="City 1" class="gallery-image">
<div class="gallery-caption">
<h3>城市风光 1</h3>
<p>现代都市的繁华</p>
</div>
</div>
<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?city=2" alt="City 2" class="gallery-image">
<div class="gallery-caption">
<h3>城市风光 2</h3>
<p>夜晚的城市灯光</p>
</div>
</div>
<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?animal=1" alt="Animal 1" class="gallery-image">
<div class="gallery-caption">
<h3>野生动物 1</h3>
<p>大自然的精灵</p>
</div>
</div>
<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?animal=2" alt="Animal 2" class="gallery-image">
<div class="gallery-caption">
<h3>野生动物 2</h3>
<p>野生动物的瞬间</p>
</div>
</div>
</div>
</div>

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 当前显示的图片索引
let currentIndex = 0;
const galleryItems = $('.gallery-item');
const lightbox = $('.lightbox');
const lightboxImage = $('.lightbox-image');
const images = [];

// 收集所有图片URL
galleryItems.each(function(index) {
images.push($(this).find('img').attr('src'));

// 点击画廊图片
$(this).on('click', function() {
currentIndex = index;
updateLightboxImage();
lightbox.addClass('active');

// 添加缩放效果
setTimeout(() => {
lightboxImage.addClass('zoom');
}, 10);
});
});

// 更新灯箱图片
function updateLightboxImage() {
lightboxImage.attr('src', images[currentIndex]).removeClass('zoom');

// 重新添加缩放效果
setTimeout(() => {
lightboxImage.addClass('zoom');
}, 10);
}

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

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

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

// 键盘导航
$(document).on('keydown', function(e) {
if (lightbox.hasClass('active')) {
switch(e.key) {
case 'ArrowLeft':
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateLightboxImage();
break;
case 'ArrowRight':
currentIndex = (currentIndex + 1) % images.length;
updateLightboxImage();
break;
case 'Escape':
lightbox.removeClass('active');
lightboxImage.removeClass('zoom');
break;
}
}
});

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