js实现大小图
实现大小图切换的JavaScript方法
通过监听用户交互（如点击或悬停）动态切换图片的显示尺寸。以下是一个基础实现示例：
// 获取DOM元素
const smallImg = document.querySelector('.small-img');
const largeImg = document.querySelector('.large-img');
// 点击小图显示大图
smallImg.addEventListener('click', function() {
largeImg.style.display = 'block';
smallImg.style.display = 'none';
});
// 点击大图返回小图
largeImg.addEventListener('click', function() {
smallImg.style.display = 'block';
largeImg.style.display = 'none';
});使用CSS过渡动画增强效果
为大小图切换添加平滑的过渡效果：
.img-container {
transition: all 0.3s ease;
}
.large-img {
transform: scale(0);
opacity: 0;
}
.large-img.active {
transform: scale(1);
opacity: 1;
}对应JavaScript修改：
smallImg.addEventListener('click', function() {
largeImg.classList.add('active');
});
largeImg.addEventListener('click', function() {
largeImg.classList.remove('active');
});响应式图片切换方案
根据屏幕尺寸自动切换图片大小：
function responsiveImageSwitch() {
const imgElement = document.getElementById('responsive-img');
if (window.innerWidth < 768) {
imgElement.src = 'small-image.jpg';
} else {
imgElement.src = 'large-image.jpg';
}
}
// 初始调用和窗口变化监听
responsiveImageSwitch();
window.addEventListener('resize', responsiveImageSwitch);使用Intersection Observer实现懒加载
当图片进入视口时加载大图版本：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.largeSrc;
observer.unobserve(img);
}
});
});
document.querySelectorAll('.lazy-img').forEach(img => {
observer.observe(img);
});HTML结构示例：
<img class="lazy-img" src="small-placeholder.jpg" data-large-src="large-image.jpg" alt="示例图片">
