我经常在博客中插入大图，然而总需要借助浏览器的滚轮缩放功能放大观看实在是不方便。于是我希望做一个点击即放大的功能。
下面就是一张可点击放大的图片，你可以点击试试！当然，我期望的效果是自动对所有博客中的图片生效。
▲ Fluent Design App Header
创建一个用于放图片的 HTML 节点
如果你是普通的 HTML 网页，可以将下面的片段放入到你的页面中。
1
2
3
4
<div id="image-cover-modal" class="image-cover-modal">
<img id="image-cover-image" class="image-cover-modal-content">
<div id="image-cover-caption"></div>
</div>
最外层是容器，里面包含一个关闭按钮，一张图片和一个图片标题。
为图片的 HTML 节点添加 CSS 样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.image-cover-modal {
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
position: fixed;
z-index: 30;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
transition: opacity ease 0.3s;
pointer-events: none;
}
.model-shown {
pointer-events: all;
opacity: 1;
}
.image-cover-modal-content {
display: block;
max-width: 80%;
max-height: 80%;
}
#image-cover-caption {
display: block;
position: absolute;
width: 100%;
height: 3rem;
bottom: 0;
line-height: 3rem;
text-align: center;
color: #fff;
background: rgba(255, 255, 255, 0.33);
}
@media only screen and (max-width: 45rem){
.image-cover-modal-content {
max-width: 100%;
max-height: 100%;
}
}
添加放大图片的 JS 脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Get the DOM
var modal = document.getElementById('image-cover-modal');
var modalImg = document.getElementById("image-cover-image");
var captionText = document.getElementById("image-cover-caption");
var span = document.getElementsByClassName("image-cover-close")[0];
// When the user clicks on <span> (x), close the modal
modal.onclick = function() {
this.classList.remove("model-shown");
}
var i;
for (i = 0; i < document.images.length; i++) {
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.images[i];
img.onclick = function(){
modal.classList.add("model-shown");
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
专为 Jekyll 设计的简化版本
如果你使用 Jekyll 搭建静态网页，那么只需要修改 3 个地方：
- 在 main.css 中添加前面的 css 片段。
- 在你想要添加放大图片的页面布局（例如 post.html）中添加
{% include clickable-image.html %}。 - 在 _includes 文件夹中添加一个 clickable-image.html 文件，存放以下内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="image-cover-modal" class="image-cover-modal">
<img id="image-cover-image" class="image-cover-modal-content">
<div id="image-cover-caption"></div>
</div>
<script>
// Get the DOM
var modal = document.getElementById('image-cover-modal');
var modalImg = document.getElementById("image-cover-image");
var captionText = document.getElementById("image-cover-caption");
var span = document.getElementsByClassName("image-cover-close")[0];
// When the user clicks on <span> (x), close the modal
modal.onclick = function() {
this.classList.remove("model-shown");
}
var i;
for (i = 0; i < document.images.length; i++) {
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.images[i];
img.onclick = function(){
modal.classList.add("model-shown");
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
</script>
你可以参考我的文件：
- /_includes/clickable-image.html
- /_layouts/post.html
- /assets/css/main.css at master · walterlv/walterlv.github.io
参考资料
本文会经常更新，请阅读原文： https://blog.walterlv.com/post/create-click-to-zoom-image-for-web-pages.html ，以避免陈旧错误知识的误导，同时有更好的阅读体验。
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名 吕毅 （包含链接： https://blog.walterlv.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请 与我联系 ([email protected]) 。