10
社区成员




实现这样的功能可以通过 HTML、CSS 和 JavaScript 来完成。下面是一个简单的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片放大查看</title>
<style>
/* 模糊背景样式 */
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
backdrop-filter: blur(10px); /* 模糊效果 */
display: none;
justify-content: center;
align-items: center;
}
/* 放大图片容器 */
.modal-content {
position: relative;
max-width: 80%;
max-height: 80%;
}
/* 关闭按钮样式 */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
color: #fff;
font-size: 24px;
z-index: 1000;
}
/* 图片样式 */
.modal-img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<!-- 缩略图 -->
<img src="thumbnail.jpg" alt="缩略图" onclick="openModal('fullsize.jpg')" style="width: 200px; height: auto; cursor: pointer;">
<!-- 放大查看模态框 -->
<div id="myModal" class="modal-bg" onclick="closeModal()">
<div class="modal-content">
<span class="close-btn" onclick="closeModal()">×</span>
<img id="modalImg" class="modal-img" src="" alt="放大图片">
</div>
</div>
<script>
// 打开模态框并显示放大的图片
function openModal(imgSrc) {
var modal = document.getElementById('myModal');
var modalImg = document.getElementById('modalImg');
modal.style.display = 'flex'; // 显示模态框
modalImg.src = imgSrc; // 设置放大的图片地址
document.body.style.overflow = 'hidden'; // 隐藏页面滚动条
}
// 关闭模态框
function closeModal() {
var modal = document.getElementById('myModal');
modal.style.display = 'none'; // 隐藏模态框
document.body.style.overflow = 'auto'; // 恢复页面滚动条
}
</script>
</body>
</html>
HTML 结构:
<img>
标签用作缩略图,设置了一个点击事件 onclick="openModal('fullsize.jpg')"
,点击时调用 openModal
函数并传入放大图片的路径。<div id="myModal">
是模态框的容器,设置了一个点击事件 onclick="closeModal()"
,用于关闭模态框。CSS 样式:
.modal-bg
定义了模糊背景的样式,使用了 backdrop-filter: blur(10px);
来实现毛玻璃效果。.modal-content
设置了放大图片的容器样式,包括最大宽度和高度限制。.close-btn
定义了关闭按钮的样式,通过绝对定位来放置在图片的右上角。JavaScript 功能:
openModal(imgSrc)
函数用于打开模态框并显示放大的图片,接收一个参数 imgSrc
表示放大图片的路径。closeModal()
函数用于关闭模态框,并恢复页面滚动条的显示。