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

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

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

h1 {
text-align: center;
margin-bottom: 30px;
font-size: 2.5em;
color: #ff6b6b;
text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

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

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

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

.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: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 20px;
opacity: 0;
transition: opacity 0.3s ease;
}

.gallery-item:hover .overlay {
opacity: 1;
}

.gallery-item h3 {
color: #fff;
margin-bottom: 5px;
}

.gallery-item p {
color: #ddd;
font-size: 0.9em;
}

/* 放大效果样式 */
.enlarged {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.enlarged.show {
opacity: 1;
pointer-events: auto;
}

.enlarged img {
max-width: 80%;
max-height: 80%;
object-fit: contain;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
border-radius: 10px;
animation: fadeInScale 0.5s ease forwards;
}

.close-btn {
position: absolute;
top: 30px;
right: 30px;
font-size: 30px;
color: white;
cursor: pointer;
background: rgba(255, 255, 255, 0.2);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}

.close-btn:hover {
background: rgba(255, 255, 255, 0.4);
transform: rotate(90deg);
}

.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: white;
cursor: pointer;
background: rgba(255, 255, 255, 0.2);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}

.prev-btn {
left: 30px;
}

.next-btn {
right: 30px;
}

.nav-btn:hover {
background: rgba(255, 255, 255, 0.4);
}

@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}

.credit {
text-align: center;
margin-top: 30px;
color: #777;
font-size: 0.9em;
}

.credit a {
color: #ff6b6b;
text-decoration: none;
}
</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?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?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?architecture=1" alt="建筑艺术1">
<div class="overlay">
<h3>建筑艺术</h3>
<p>人类智慧的结晶</p>
</div>
</div>
<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?food=1" alt="美食佳肴1">
<div class="overlay">
<h3>美食诱惑</h3>
<p>味觉与视觉的双重享受</p>
</div>
</div>
<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400?travel=1" alt="旅行探险1">
<div class="overlay">
<h3>旅行探险</h3>
<p>发现世界的不同角落</p>
</div>
</div>
</div>

<div class="credit">
<p>图片来自 <a href="https://unsplash.com" target="_blank">Unsplash</a> 获取更多资源</p>
</div>
</div>


<div class="enlarged">
<span class="close-btn">×</span>
<span class="nav-btn prev-btn"><</span>
<img src="" alt="放大图片">
<span class="nav-btn next-btn">></span>
</div>


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

<script>
$(document).ready(function() {
// 获取所有图片项
const $galleryItems = $('.gallery-item');
const $enlarged = $('.enlarged');
const $enlargedImg = $('.enlarged img');
const $closeBtn = $('.close-btn');
const $prevBtn = $('.prev-btn');
const $nextBtn = $('.next-btn');

let currentIndex = 0;

// 点击图片显示放大效果
$galleryItems.on('click', function() {
currentIndex = $(this).index();
const imgSrc = $(this).find('img').attr('src');
$enlargedImg.attr('src', imgSrc);
$enlarged.addClass('show');
$('body').css('overflow', 'hidden');
});

// 关闭放大视图
$closeBtn.on('click', function() {
$enlarged.removeClass('show');
$('body').css('overflow', 'auto');
});

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

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

// 键盘导航
$(document).on('keydown', function(e) {
if ($enlarged.hasClass('show')) {
if (e.key === 'Escape') {
$enlarged.removeClass('show');
$('body').css('overflow', 'auto');
} else if (e.key === 'ArrowLeft') {
currentIndex = (currentIndex - 1 + $galleryItems.length) % $galleryItems.length;
updateEnlargedImage();
} else if (e.key === 'ArrowRight') {
currentIndex = (currentIndex + 1) % $galleryItems.length;
updateEnlargedImage();
}
}
});

// 更新放大图片
function updateEnlargedImage() {
const imgSrc = $galleryItems.eq(currentIndex).find('img').attr('src');
$enlargedImg.attr('src', imgSrc).css('animation', 'none');
setTimeout(() => {
$enlargedImg.css('animation', 'fadeInScale 0.5s ease forwards');
}, 10);
}

// 点击背景关闭
$enlarged.on('click', function(e) {
if (e.target === this) {
$enlarged.removeClass('show');
$('body').css('overflow', 'auto');
}
});
});
</script>
</body>
</html>