在HTML中，我们可以使用<img>标签来插入图片，仅仅使用<img>标签并不能实现图片预览功能，要实现图片预览功能，我们需要结合JavaScript和CSS，本文将详细介绍如何在HTML中实现图片预览功能，并提供相关问题与解答。
HTML部分
1、使用<img>标签插入图片
2、为图片添加一个类名或ID,以便后续使用JavaScript进行操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片预览</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="example.jpg" alt="示例图片" class="preview-image">
<div class="preview-overlay"></div>
<div class="preview-container">
<img src="" alt="" id="preview-image">
</div>
<script src="scripts.js"></script>
</body>
</html>
CSS部分(styles.css)
1、为.preview-image设置样式，使其显示原图大小的圆形占位符
2、为.preview-overlay设置样式，使其覆盖在原图上，形成半透明的遮罩层
3、为.preview-container设置样式，使其包含预览图片和遮罩层
4、为.preview-container img设置样式，使其自适应容器大小
5、为.preview-overlay设置样式，使其半透明且不可见时不占用空间
6、为.preview-overlay:hover设置样式，使其变为全透明，显示预览图片
.preview-image {
width: 100%;
height: auto;
}
.preview-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: rgba(0, 0, 0, 0.5);
}
.preview-container {
position: relative;
z-index: 1000;
}
.preview-container img {
max-width: 100%;
max-height: calc(100% + 50px); /* 加上遮罩层的高度 */
}
.preview-overlay:hover,
.preview-container:hover img {
opacity: 1; /* 当鼠标悬停在遮罩层或预览图片上时，显示原图 */
}
JavaScript部分(scripts.js)
1、为.preview-image元素添加点击事件监听器，当点击图片时触发预览功能
2、在预览功能中，获取点击的图片URL,并将其设置为.preview-container img的src属性值，同时显示遮罩层和预览图片框体
3、当鼠标离开图片或遮罩层时，隐藏预览图片框体和遮罩层，恢复原图显示状态
const previewImage = document.querySelector('.preview-image'); // 通过类名获取原图元素
const previewContainer = document.querySelector('.preview-container'); // 通过ID获取预览框体元素
const overlay = document.querySelector('.preview-overlay'); // 通过类名获取遮罩层元素
const imageSrc = previewImage.getAttribute('src'); // 获取原图URL
const previewSrc = ${imageSrc}?x-oss-process=image/resize,m_fill,h_160,w_160; // 对原图进行缩放处理，以适应预览框体的大小(可根据实际需求调整)
const previewImg = previewContainer.querySelector('img'); // 通过ID获取预览图片元素
const currentPreviewSrc = previewImg.getAttribute('src'); // 获取当前预览图片的URL(如果有的话)
if (currentPreviewSrc !== previewSrc) { // 如果当前URL与目标URL不同，则进行预览切换操作(避免重复切换)
previewImg.setAttribute('src', previewSrc); // 将目标URL设置为预览图片的src属性值(替换掉原图)
} else if (currentPreviewSrc === previewSrc && overlay.style.opacity !== '1') { // 如果当前URL与目标URL相同且遮罩层未显示，则直接显示原图(无需切换)和遮罩层(确保其可见)
overlay.style.opacity = '1'; // 将遮罩层的透明度设置为1(完全不透明)并显示出来(确保其可见)
} else if (currentPreviewSrc === previewSrc && overlay.style.opacity === '1') { // 如果当前URL与目标URL相同且遮罩层已显示，则直接隐藏遮罩层(确保其不可见)并恢复原图显示状态(无需切换)
overlay.style.opacity = '0'; // 将遮罩层的透明度设置为0(完全透明)并隐藏起来(确保其不可见)
} else if (currentPreviewSrc !== previewSrc) { // 如果当前URL与目标URL不同且遮罩层已显示，则先隐藏遮罩层(确保其不可见),然后进行预览切换操作(避免重复切换)并重新显示遮罩层(确保其可见)
overlay.style.opacity = '0'; // 将遮罩层的透明度设置为0(完全透明)并隐藏起来(确保其不可见)
} else if (currentPreviewSrc !== previewSrc) { // 如果当前URL与目标URL不同且遮罩层未显示，则直接进行预览切换操作(避免重复切换)并显示遮罩层(确保其可见)
const newImageSrc = ${imageSrc}?x-oss-process=image/resize,m_fill,h_288,w_288; // 对原图进行缩放处理，以适应预览框体的大小(可根据实际需求调整)并生成新的URL(用于切换时的新图)和新的目标URL(用于切换时的旧图)
previewImg.setAttribute('src', newImageSrc); // 将新的目标URL设置为预览图片的src属性值(替换掉原图)并更新当前预览图片的URL(用于切换时的旧图)为新的目标URL(用于切换时的旧图)和新的目标URL(用于切换时的旧图)(这样可以保证每次切换都是从旧图到新图的过程)
} else if (currentPreviewSrc !== previewSrc && currentPreviewSrc !== undefined && currentPreviewSrc !== null && overlay.style.opacity === '1') { // 如果当前URL与目标URL相同且遮罩层已显示且当前URL不为空且当前URL不为null且当前URL不为undefined(这是为了防止因为某些原因导致currentPreviewSrc被赋值为undefined或null而引发的问题),则直接隐藏遮罩层并恢复原图显示状态即可(无需切换)
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/211198.html
微信扫一扫 