当前位置：首页 > news >正文

图片画廊浏览（侧重 CSS 网格布局和模态框交互）

news 2025/7/18 8:18:00

图片画廊浏览：

响应式网格布局，自动适应不同屏幕宽度
图片分类筛选功能
点击图片弹出模态框查看大图
支持键盘导航（左右箭头切换，ESC 关闭）
悬停效果增强用户体验

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>风景图片画廊</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><style>.gallery-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 1.5rem;}.gallery-item {position: relative;overflow: hidden;border-radius: 0.75rem;cursor: pointer;aspect-ratio: 4/3;}.gallery-item img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}.gallery-item:hover img {transform: scale(1.05);}.gallery-item::after {content: '';position: absolute;inset: 0;background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);opacity: 0;transition: opacity 0.3s ease;}.gallery-item:hover::after {opacity: 1;}.gallery-caption {position: absolute;bottom: 0;left: 0;right: 0;padding: 1.5rem;color: white;transform: translateY(20px);transition: transform 0.3s ease;z-index: 1;}.gallery-item:hover .gallery-caption {transform: translateY(0);}.modal {opacity: 0;visibility: hidden;transition: all 0.3s ease;}.modal.active {opacity: 1;visibility: visible;}.modal-content {transform: scale(0.95);transition: transform 0.3s ease;}.modal.active .modal-content {transform: scale(1);}</style>
</head>
<body class="bg-gray-100 font-sans"><header class="bg-white shadow-sm py-6"><div class="container mx-auto px-4"><h1 class="text-3xl font-bold text-gray-800 text-center">风景图片画廊</h1><p class="text-gray-600 text-center mt-2">探索世界各地的美丽景色</p></div></header><main class="container mx-auto px-4 py-10"><!-- 画廊过滤器 --><div class="flex flex-wrap justify-center gap-3 mb-10"><button class="filter-btn active px-5 py-2 rounded-full bg-green-600 text-white" data-category="all">全部</button><button class="filter-btn px-5 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors" data-category="mountains">山脉</button><button class="filter-btn px-5 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors" data-category="oceans">海洋</button><button class="filter-btn px-5 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors" data-category="forests">森林</button><button class="filter-btn px-5 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors" data-category="deserts">沙漠</button></div><!-- 图片画廊 --><div class="gallery-grid"><!-- 图片项将通过JS动态生成 --></div></main><!-- 模态框预览 --><div id="image-modal" class="modal fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4"><div class="modal-content relative max-w-5xl w-full"><button id="close-modal" class="absolute -top-12 right-0 text-white text-2xl hover:text-gray-300 transition-colors"><i class="fa-solid fa-times"></i></button><button id="prev-btn" class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white w-10 h-10 rounded-full flex items-center justify-center transition-colors"><i class="fa-solid fa-chevron-left"></i></button><img id="modal-image" src="" alt="大图预览" class="w-full h-auto rounded-lg"><button id="next-btn" class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white w-10 h-10 rounded-full flex items-center justify-center transition-colors"><i class="fa-solid fa-chevron-right"></i></button><div class="mt-4 text-white"><h3 id="modal-title" class="text-xl font-semibold"></h3><p id="modal-desc" class="text-gray-300"></p></div></div></div><footer class="bg-gray-800 text-white py-8 mt-16"><div class="container mx-auto px-4 text-center"><p>© 2025 风景画廊 | 用HTML、CSS和JavaScript构建</p></div></footer><script>// 画廊图片数据const galleryItems = [{id: 1,src: 'https://picsum.photos/id/29/800/600',thumbnail: 'https://picsum.photos/id/29/400/300',title: '山间云海',description: '清晨的山脉被云海环绕，宛如仙境',category: 'mountains'},{id: 2,src: 'https://picsum.photos/id/65/800/600',thumbnail: 'https://picsum.photos/id/65/400/300',title: '宁静海岸',description: '蓝色的海水拍打岸边，留下白色的浪花',category: 'oceans'},{id: 3,src: 'https://picsum.photos/id/137/800/600',thumbnail: 'https://picsum.photos/id/137/400/300',title: '茂密森林',description: '阳光透过树叶洒下，形成斑驳的光影',category: 'forests'},{id: 4,src: 'https://picsum.photos/id/10/800/600',thumbnail: 'https://picsum.photos/id/10/400/300',title: '沙漠日落',description: '夕阳下的沙漠呈现出温暖的金黄色',category: 'deserts'},{id: 5,src: 'https://picsum.photos/id/28/800/600',thumbnail: 'https://picsum.photos/id/28/400/300',title: '雪山之巅',description: '高耸的雪山直插云霄，壮丽非凡',category: 'mountains'},{id: 6,src: 'https://picsum.photos/id/76/800/600',thumbnail: 'https://picsum.photos/id/76/400/300',title: '热带海滩',description: '白色的沙滩和清澈的海水，度假胜地',category: 'oceans'},{id: 7,src: 'https://picsum.photos/id/129/800/600',thumbnail: 'https://picsum.photos/id/129/400/300',title: '迷雾森林',description: '清晨的森林被薄雾笼罩，神秘而宁静',category: 'forests'},{id: 8,src: 'https://picsum.photos/id/110/800/600',thumbnail: 'https://picsum.photos/id/110/400/300',title: '沙漠星空',description: '夜晚的沙漠，繁星满天，银河清晰可见',category: 'deserts'}];// DOM元素const galleryGrid = document.querySelector('.gallery-grid');const filterBtns = document.querySelectorAll('.filter-btn');const modal = document.getElementById('image-modal');const modalImage = document.getElementById('modal-image');const modalTitle = document.getElementById('modal-title');const modalDesc = document.getElementById('modal-desc');const closeModal = document.getElementById('close-modal');const prevBtn = document.getElementById('prev-btn');const nextBtn = document.getElementById('next-btn');let currentImageIndex = 0;let filteredItems = [...galleryItems];// 初始化画廊renderGallery(galleryItems);// 渲染画廊function renderGallery(items) {galleryGrid.innerHTML = '';items.forEach((item, index) => {const galleryItem = document.createElement('div');galleryItem.className = 'gallery-item';galleryItem.dataset.category = item.category;galleryItem.dataset.index = index;galleryItem.innerHTML = `<img src="${item.thumbnail}" alt="${item.title}"><div class="gallery-caption"><h3 class="font-semibold text-lg">${item.title}</h3><p class="text-sm text-gray-200">${item.description.substring(0, 30)}...</p></div>`;galleryItem.addEventListener('click', () => {openModal(index);});galleryGrid.appendChild(galleryItem);});}// 打开模态框function openModal(index) {currentImageIndex = index;const item = filteredItems[index];modalImage.src = item.src;modalImage.alt = item.title;modalTitle.textContent = item.title;modalDesc.textContent = item.description;modal.classList.add('active');document.body.style.overflow = 'hidden';}// 关闭模态框function closeModalFunc() {modal.classList.remove('active');document.body.style.overflow = '';}// 下一张图片function nextImage() {currentImageIndex = (currentImageIndex + 1) % filteredItems.length;const item = filteredItems[currentImageIndex];modalImage.src = item.src;modalTitle.textContent = item.title;modalDesc.textContent = item.description;}// 上一张图片function prevImage() {currentImageIndex = (currentImageIndex - 1 + filteredItems.length) % filteredItems.length;const item = filteredItems[currentImageIndex];modalImage.src = item.src;modalTitle.textContent = item.title;modalDesc.textContent = item.description;}// 筛选功能filterBtns.forEach(btn => {btn.addEventListener('click', () => {// 更新按钮样式filterBtns.forEach(b => {b.classList.remove('active', 'bg-green-600', 'text-white');b.classList.add('bg-gray-200', 'hover:bg-gray-300');});btn.classList.add('active', 'bg-green-600', 'text-white');btn.classList.remove('bg-gray-200', 'hover:bg-gray-300');// 筛选图片const category = btn.dataset.category;if (category === 'all') {filteredItems = [...galleryItems];} else {filteredItems = galleryItems.filter(item => item.category === category);}renderGallery(filteredItems);});});// 事件监听closeModal.addEventListener('click', closeModalFunc);nextBtn.addEventListener('click', nextImage);prevBtn.addEventListener('click', prevImage);// 点击模态框背景关闭modal.addEventListener('click', (e) => {if (e.target === modal) {closeModalFunc();}});// 键盘导航document.addEventListener('keydown', (e) => {if (!modal.classList.contains('active')) return;if (e.key === 'Escape') closeModalFunc();if (e.key === 'ArrowRight') nextImage();if (e.key === 'ArrowLeft') prevImage();});</script>
</body>
</html>

查看全文

http://www.lryc.cn/news/591190.html