双击图片弹出插件

原创已于 2025-06-27 15:15:40 修改 · 387 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-05 17:54:41 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双击图片弹出插件</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.image-container {
display: inline-block;
margin: 10px;
}
.image-container img {
max-width: 300px;
cursor: pointer;
border: 2px solid #ddd;
border-radius: 5px;
transition: transform 0.3s;
}
.image-container img:hover {
transform: scale(1.02);
}
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal-content {
max-width: 80%;
max-height: 80%;
}
.modal-content img {
max-width: 100%;
max-height: 100%;
border: 5px solid white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.close-btn {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 30px;
cursor: pointer;
}
.credit {
position: fixed;
bottom: 10px;
right: 10px;
color: #aaa;
font-size: 12px;
}
</style>
</head>
<body>
<h1>双击图片查看大图</h1>
<div class="image-container">
<img src="https://picsum.photos/300/200" alt="示例图片1" class="zoomable">
</div>
<div class="image-container">
<img src="https://picsum.photos/300/200" alt="示例图片2" class="zoomable">
</div>
<div class="image-container">
<img src="https://picsum.photos/300/300" alt="示例图片3" class="zoomable">
</div>

// 点击关闭按钮或模态框背景关闭模态框
$('.close-btn, #imageModal').click(function(e) {
if (e.target !== this && !$(e.target).hasClass('close-btn')) return;
$('#imageModal').fadeOut();
});

// 按ESC键关闭模态框
$(document).keyup(function(e) {
if (e.key === "Escape") {
$('#imageModal').fadeOut();
}
});
});
</script>
</body>
</html>