为博客增加大图浏览模式
之前使用 Huxpro 的博客模板搭建了这个博客。后来的使用过程中，发现缺少了大图浏览的功能，作为一个前段萌新，用了两天时间为博客加了一个粗糙的大图浏览功能。
如何居中显示一张大图
首先我们要做的就是如何在屏幕中间展示一个大图片。也不废话了，下面的代码是我一个个试出来的。
大图的标签：
<div id="YunisTestImage" class="SYYImageDiss">
<img id="SSYLargeImage" src="">
</div>
css：
.SYYImageShow {
transition:
font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
background 0.2s;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 10000000;
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.55);
}
#SSYLargeImage {
width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
/* max-width: 100%; */
}
.SYYImageDiss {
display: none;
}
SYYImageShow显示大图，SYYImageDiss隐藏大图，SSYLargeImage图片展示大小。
如何展示大图有了，接下来就是在点击图片的时候，加载出来这个图片。
为图片添加点击事件
经过观察，博客里面的图片展示的时候，外面都会包含一个 p 标签。所以为 img 标签添加点击事件的逻辑如下。
$(function() {
$('p img').click(function () {
let imageStr = document.querySelector("#YunisTestImage").getAttribute("class");
if (`${imageStr}` == "SYYImageDiss") {
$("#YunisTestImage").removeClass('SYYImageDiss');
$("#YunisTestImage").addClass('SYYImageShow');
$("#SSYLargeImage").attr({ "src": $(this).attr("src") });
}else {
$("#YunisTestImage").removeClass('SYYImageShow');
$("#YunisTestImage").addClass('SYYImageDiss');
$("#SSYLargeImage").attr({ "src": "" });
}
});
$('#YunisTestImage').click(function () {
$("#YunisTestImage").removeClass('SYYImageShow');
$("#YunisTestImage").addClass('SYYImageDiss');
$("#SSYLargeImage").attr({ "src": "" });
});
});
接下来就是把 css 文件和 js 文件加载在合适的位置。
效果如下：
