HTML相册
文章最后更新时间：2024年09月01日
1. 创建HTML结构
首先，创建一个基本的HTML文件结构，包括画廊容器、模态框和分页按钮。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Photo Album with Lazy Loading</title> <style> /* 添加CSS样式 */ </style></head><body> <div class="container"> <div class="gallery" id="gallery"></div> <div class="pagination" id="pagination"></div> </div> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> <script> // 添加JavaScript代码 </script></body></html>
2. 添加CSS样式
为画廊、模态框和分页按钮添加样式，使其具有良好的视觉效果和响应式布局。
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4;
}.container { max-width: 1200px; margin: 0 auto; padding: 20px;
}.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;
}.gallery img { width: 100%; height: auto; border-radius: 8px; cursor: pointer; transition: transform 0.2s; display: block;
}.gallery img:hover { transform: scale(1.05);
}.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9);
}.modal-content { margin: auto; display: block; width: 80%; max-width: 700px;
}.close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s;
}.close:hover,.close:focus { color: #bbb; text-decoration: none; cursor: pointer;
}.pagination { display: flex; justify-content: center; margin-top: 20px;
}.pagination button { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s;
}.pagination button:hover { background-color: #45a049;
}.pagination button.active { background-color: #007bff;
}3. 添加JavaScript功能
实现图片懒加载、分页和模态框功能。
let images = [];// 假设图片从1.jpg到274.jpgfor (let i = 1; i <= 274; i++) { let imageUrl = `http://示例网址/${i}.jpg`;
images.push({ url: imageUrl, description: `Image ${i} description`
});
}const imagesPerPage = 10;let currentPage = 1;function displayImages(page) { const gallery = document.getElementById('gallery');
gallery.innerHTML = ''; const start = (page - 1) * imagesPerPage; const end = start + imagesPerPage; const pageImages = images.slice(start, end);
pageImages.forEach(img => { const div = document.createElement('div');
div.innerHTML = `
<img data-src="${img.url}" alt="${img.description}" data-description="${img.description}" class="lazy">
`;
gallery.appendChild(div);
}); // 初始化IntersectionObserver
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
observer.unobserve(img); // 停止观察这个元素
}
});
}, { rootMargin: '0px', threshold: 0.1 // 当图片至少有10%进入视口时触发
}); // 观察所有带有'lazy'类的图片
document.querySelectorAll('#gallery img.lazy').forEach(img => {
observer.observe(img);
});
}function displayPagination() { const totalPages = Math.ceil(images.length / imagesPerPage); const pagination = document.getElementById('pagination');
pagination.innerHTML = ''; const maxButtons = 2; let startPage = Math.max(1, currentPage - Math.floor(maxButtons / 2)); let endPage = Math.min(totalPages, startPage + maxButtons - 1); if (endPage - startPage < maxButtons - 1) {
startPage = Math.max(1, endPage - maxButtons + 1);
} if (startPage > 1) { const btn = document.createElement('button');
btn.innerText = '<<';
btn.onclick = () => {
currentPage = 1; displayImages(currentPage); displayPagination();
};
pagination.appendChild(btn);
} if (currentPage > 1) { const btn = document.createElement('button');
btn.innerText = '<';
btn.onclick = () => {
currentPage--; displayImages(currentPage); displayPagination();
};
pagination.appendChild(btn);
} for (let i = startPage; i <= endPage; i++) { const btn = document.createElement('button');
btn.innerText = i;
btn.className = i === currentPage ? 'active' : '';
btn.onclick = () => {
currentPage = i; displayImages(currentPage); displayPagination();
};
pagination.appendChild(btn);
} if (currentPage < totalPages) { const btn = document.createElement('button');
btn.innerText = '>';
btn.onclick = () => {
currentPage++; displayImages(currentPage); displayPagination();
};
pagination.appendChild(btn);
} if (endPage < totalPages) { const btn = document.createElement('button');
btn.innerText = '>>';
btn.onclick = () => {
currentPage = totalPages; displayImages(currentPage); displayPagination();
};
pagination.appendChild(btn);
}
}function openModal(img) { const modal = document.getElementById('myModal'); const modalImg = document.getElementById('img01'); const captionText = document.getElementById('caption');
modal.style.display = 'block';
modalImg.src = img.src;
captionText.innerHTML = img.alt;
const span = document.getElementsByClassName('close')[0];
span.onclick = () => {
modal.style.display = 'none';
};
modal.onclick = (event) => {
if (event.target === modal) {
modal.style.display = 'none';
}
};
}
document.getElementById(‘gallery’).addEventListener(‘click’, (event) => {
if (event.target.tagName === ‘IMG’) {
openModal(event.target);
}
});
displayImages(currentPage);
displayPagination();4. 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Photo Album with Lazy Loading</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s;
display: block; /* 确保图片显示为块级元素 */
}
.gallery img:hover {
transform: scale(1.05);
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
.pagination button:hover {
background-color: #45a049;
}
.pagination button.active {
background-color: #007bff;
}
.fenxiang button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
.fenxiang button:hover {
background-color: #45a049;
}
.fenxiang button.active {
background-color: #007bff;
}
.xiazai button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
.xiazai button:hover {
background-color: #45a049;
}
.xiazai button.active {
background-color: #007bff;
}
</style>
</head>
<body>
<div>
<button onclick="copyLink()">分享</button>
</div>
<div>
<button onclick="download()">下载</button>
</div>
<div>
<div id="gallery"></div>
<div id="pagination"></div>
</div>
<div id="myModal">
<span>×</span>
<img id="img01">
<div id="caption"></div>
</div>
<script>
function copyLink() {
// 创建一个临时的输入框元素
const tempInput = document.createElement('input');
// 设置输入框的值为当前页面的URL
tempInput.value = window.location.href;
// 将输入框添加到文档中
document.body.appendChild(tempInput);
// 选择输入框的内容
tempInput.select();
// 复制选中的内容
document.execCommand('copy');
// 从文档中移除临时的输入框
document.body.removeChild(tempInput);
// 可选：显示一个提示信息
alert('链接已复制到剪贴板：' + tempInput.value);
}
function download() {
// 创建一个临时的 <a> 元素
const link = document.createElement('a');
// 设置 href 属性为文件的 URL
link.href = 'http://示例网址/示例.zip';
// 设置 download 属性为下载文件的名称
link.download = '示例.zip';
// 将链接添加到文档中
document.body.appendChild(link);
// 触发点击事件
link.click();
// 从文档中移除链接
document.body.removeChild(link);
}
let images = [];
// 假设图片从1.jpg到274.jpg
for (let i = 1; i <= 274; i++) {
let imageUrl = `http://示例网址/${i}.jpg`;
images.push({
url: imageUrl,
description: `Image ${i} description`
});
}
const imagesPerPage = 10;
let currentPage = 1;
function displayImages(page) {
const gallery = document.getElementById('gallery');
gallery.innerHTML = '';
const start = (page - 1) * imagesPerPage;
const end = start + imagesPerPage;
const pageImages = images.slice(start, end);
pageImages.forEach(img => {
const div = document.createElement('div');
div.innerHTML = `
<img data-src="${img.url}" alt="${img.description}" data-description="${img.description}">
`;
gallery.appendChild(div);
});
// 初始化IntersectionObserver
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
observer.unobserve(img); // 停止观察这个元素
}
});
}, {
rootMargin: '0px',
threshold: 0.1 // 当图片至少有10%进入视口时触发
});
// 观察所有带有'lazy'类的图片
document.querySelectorAll('#gallery img.lazy').forEach(img => {
observer.observe(img);
});
}
function displayPagination() {
const totalPages = Math.ceil(images.length / imagesPerPage);
const pagination = document.getElementById('pagination');
pagination.innerHTML = '';
const maxButtons = 2;
let startPage = Math.max(1, currentPage - Math.floor(maxButtons / 2));
let endPage = Math.min(totalPages, startPage + maxButtons - 1);
if (endPage - startPage < maxButtons - 1) {
startPage = Math.max(1, endPage - maxButtons + 1);
}
if (startPage > 1) {
const btn = document.createElement('button');
btn.innerText = '<<';
btn.onclick = () => {
currentPage = 1;
displayImages(currentPage);
displayPagination();
};
pagination.appendChild(btn);
}
if (currentPage > 1) {
const btn = document.createElement('button');
btn.innerText = '<';
btn.onclick = () => {
currentPage--;
displayImages(currentPage);
displayPagination();
};
pagination.appendChild(btn);
}
for (let i = startPage; i <= endPage; i++) {
const btn = document.createElement('button');
btn.innerText = i;
btn.className = i === currentPage ? 'active' : '';
btn.onclick = () => {
currentPage = i;
displayImages(currentPage);
displayPagination();
};
pagination.appendChild(btn);
}
if (currentPage < totalPages) {
const btn = document.createElement('button');
btn.innerText = '>';
btn.onclick = () => {
currentPage++;
displayImages(currentPage);
displayPagination();
};
pagination.appendChild(btn);
}
if (endPage < totalPages) {
const btn = document.createElement('button');
btn.innerText = '>>';
btn.onclick = () => {
currentPage = totalPages;
displayImages(currentPage);
displayPagination();
};
pagination.appendChild(btn);
}
}
function openModal(img) {
const modal = document.getElementById('myModal');
const modalImg = document.getElementById('img01');
const captionText = document.getElementById('caption');
modal.style.display = 'block';
modalImg.src = img.src;
captionText.innerHTML = img.alt;
const span = document.getElementsByClassName('close')[0];
span.onclick = () => {
modal.style.display = 'none';
};
modal.onclick = (event) => {
if (event.target === modal) {
modal.style.display = 'none';
}
};
}
document.getElementById('gallery').addEventListener('click', (event) => {
if (event.target.tagName === 'IMG') {
openModal(event.target);
}
});
displayImages(currentPage);
displayPagination();
</script>
</body>
</html>打赏
收藏
点赞
文章版权声明：除非注明，否则均为温馨小家原创文章，转载或复制请以超链接形式并注明出处。
还没有评论，来说两句吧...