hexo-theme-quiet/layout/_partial/post_centent.ejs

70 lines
2.0 KiB
Plaintext

<div class="article-content">
<div id="article" class="content">
<%- page.content %>
</div>
</div>
<style>
@media screen and (min-width: 600px) {
.noneimg {
cursor: pointer;
display: none;
z-index: 109;
width: 600px;
height: auto;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
@media screen and (max-width: 600px) {
.noneimg {
cursor: pointer;
display: none;
z-index: 109;
width: 88%;
height: auto;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
</style>
<script>
$(function () {
// 点击图片进行放大
$('body').click(function (e) {
if ($('.noneimg').length !== 0 && $('.nonediv').length !== 0) {
$(".noneimg").fadeOut("slow");
$(".nonediv").fadeOut("slow");
setTimeout(function () {
$('.noneimg').remove()
$('.nonediv').remove()
}, 800);
} else {
console.log()
if (e.target.tagName == "IMG") {
let imgUrl = "<img class='noneimg' style='border-radius: <%=theme.picture.imgRadius %>;' src='" + e.target.currentSrc + "'>"
let MDiv = "<div class='nonediv' style='cursor: pointer;display: none; position: fixed;left: 0;top: 0; right: 0;bottom: 0;background-color: <%= theme.picture.colour %>;opacity:<%= theme.picture.opacity %>;z-index: 108;'></div>"
$('body').append(MDiv)
$('body').append(imgUrl)
$(".noneimg").fadeIn("slow");
$(".nonediv").fadeIn("slow");
}
}
})
$('.article-content').addClass('content-move');
})
</script>