jQuery图片点击放大预览功能

ziblog

已于 2025-06-27 14:58:24 修改

阅读量670

点赞数 14

CC 4.0 BY-SA版权

文章标签：前端 javascript html

于 2025-05-14 13:50:48 首次发布

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery图片点击放大预览功能</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
line-height: 1.6;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}

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

.gallery-item {
position: relative;
overflow: hidden;
border-radius: 6px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}

.gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.gallery-img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
transition: transform 0.5s;
}

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

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

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

/* 放大预览样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.9);
display: none;
z-index: 1000;
cursor: zoom-out;
}

.modal-image {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
z-index: 1001;
animation: zoomIn 0.3s;
cursor: default;
}

.modal-caption {
position: fixed;
bottom: 20px;
left: 0;
right: 0;
color: white;
text-align: center;
padding: 10px;
z-index: 1001;
background: rgba(0, 0, 0, 0.5);
display: none;
}

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

.nav-btn {
position: fixed;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 30px;
z-index: 1001;
cursor: pointer;
background: rgba(0, 0, 0, 0.5);
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
display: none;
}

.prev-btn {
left: 20px;
}

.next-btn {
right: 20px;
}

@keyframes zoomIn {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.7);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}

/* 响应式设计 */
@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.gallery-img {
height: 150px;
}
}

@media (max-width: 480px) {
.gallery {
grid-template-columns: 1fr;
}

.nav-btn {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery图片点击放大预览功能</h1>



<div class="gallery">
<div class="gallery-item">
<img src="https://picsum.photos/id/10/800/600" alt="自然风景1" class="gallery-img" data-caption="美丽的自然风景照片1">
<div class="gallery-caption">自然风景1</div>
</div>
<div class="gallery-item">
<img src="https://picsum.photos/id/11/800/600" alt="自然风景2" class="gallery-img" data-caption="美丽的自然风景照片2">
<div class="gallery-caption">自然风景2</div>
</div>
<div class="gallery-item">
<img src="https://picsum.photos/id/12/800/600" alt="自然风景3" class="gallery-img" data-caption="美丽的自然风景照片3">
<div class="gallery-caption">自然风景3</div>
</div>
<div class="gallery-item">
<img src="https://picsum.photos/id/13/800/600" alt="自然风景4" class="gallery-img" data-caption="美丽的自然风景照片4">
<div class="gallery-caption">自然风景4</div>
</div>
<div class="gallery-item">
<img src="https://picsum.photos/id/14/800/600" alt="自然风景5" class="gallery-img" data-caption="美丽的自然风景照片5">
<div class="gallery-caption">自然风景5</div>
</div>
<div class="gallery-item">
<img src="https://picsum.photos/id/15/800/600" alt="自然风景6" class="gallery-img" data-caption="美丽的自然风景照片6">
<div class="gallery-caption">自然风景6</div>
</div>
</div>

<p>这个示例展示了如何使用jQuery实现图片点击放大预览功能，支持多图片导航和键盘操作。</p>
</div>


<div class="modal-overlay" id="imageOverlay"></div>
<img class="modal-image" id="modalImage" alt="放大预览">
<div class="modal-caption" id="modalCaption"></div>
<div class="close-btn" id="closeBtn">×</div>
<div class="nav-btn prev-btn" id="prevBtn">❮</div>
<div class="nav-btn next-btn" id="nextBtn">❯</div>

<script>
$(document).ready(function() {
// 获取所有图片元素
const $images = $('.gallery-img');
const $overlay = $('#imageOverlay');
const $modalImage = $('#modalImage');
const $modalCaption = $('#modalCaption');
const $closeBtn = $('#closeBtn');
const $prevBtn = $('#prevBtn');
const $nextBtn = $('#nextBtn');

let currentIndex = 0;
let isOpen = false;

// 点击图片打开预览
$images.on('click', function() {
currentIndex = $images.index(this);
openModal(currentIndex);
});

// 打开预览函数
function openModal(index) {
const $img = $images.eq(index);
const imgSrc = $img.attr('src');
const caption = $img.data('caption') || $img.attr('alt');

$modalImage.attr('src', imgSrc);
$modalCaption.text(caption);

$overlay.fadeIn(300);
$modalImage.fadeIn(300);
$modalCaption.fadeIn(300);
$closeBtn.fadeIn(300);
$prevBtn.fadeIn(300);
$nextBtn.fadeIn(300);

isOpen = true;

// 检查是否需要隐藏导航按钮
if (currentIndex === 0) {
$prevBtn.hide();
}
if (currentIndex === $images.length - 1) {
$nextBtn.hide();
}
}

// 关闭预览函数
function closeModal() {
$overlay.fadeOut(300);
$modalImage.fadeOut(300);
$modalCaption.fadeOut(300);
$closeBtn.fadeOut(300);
$prevBtn.fadeOut(300);
$nextBtn.fadeOut(300);

isOpen = false;
}

// 关闭按钮点击事件
$closeBtn.on('click', closeModal);

// 遮罩层点击事件
$overlay.on('click', closeModal);

// 上一张按钮
$prevBtn.on('click', function(e) {
e.stopPropagation();
if (currentIndex > 0) {
currentIndex--;
openModal(currentIndex);
}
});

// 下一张按钮
$nextBtn.on('click', function(e) {
e.stopPropagation();
if (currentIndex < $images.length - 1) {
currentIndex++;
openModal(currentIndex);
}
});

// 键盘导航
$(document).on('keydown', function(e) {
if (!isOpen) return;

e.preventDefault();

switch (e.key) {
case 'Escape':
closeModal();
break;
case 'ArrowLeft':
if (currentIndex > 0) {
currentIndex--;
openModal(currentIndex);
}
break;
case 'ArrowRight':
if (currentIndex < $images.length - 1) {
currentIndex++;
openModal(currentIndex);
}
break;
}
});

// 阻止点击图片时事件冒泡
$modalImage.on('click', function(e) {
e.stopPropagation();
});

// 控制台输出信息
console.log('图片放大预览功能已初始化');
});
</script>
</body>
</html>