mirror of
https://github.com/Kakune55/ComiPy.git
synced 2025-05-06 18:29:26 +08:00
109 lines
3.2 KiB
HTML
109 lines
3.2 KiB
HTML
<!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;
|
||
margin: 0;
|
||
padding: 20px;
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
#comic-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.comic-image {
|
||
max-width: 100%;
|
||
height: auto;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
img {
|
||
display: block;
|
||
width: 100%;
|
||
min-height: 300px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
#global-blur {
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
/* 模糊度可以根据需要调整 */
|
||
transition: display;
|
||
z-index: 1;
|
||
/* 保证遮罩在页面上方 */
|
||
pointer-events: none;
|
||
/* 确保遮罩不影响下方元素的交互 */
|
||
opacity: 0;
|
||
transition: opacity 0.1s ease
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
{% for i in index %}
|
||
<img data-src="/api/img/{{ id }}/{{ i }}" loading="lazy" alt="{{ i }}" class="imgs">
|
||
{% endfor %}
|
||
<div style="display:flex;justify-content: center; align-items:center;">
|
||
<img src="/static/loading.gif" id="loadingGIF">
|
||
</div>
|
||
<div id="global-blur" onclick="unshow_global_blur()"></div>
|
||
<script>
|
||
var imgs = document.querySelectorAll('.imgs');
|
||
|
||
//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
|
||
function getTop(e) {
|
||
var T = e.offsetTop;
|
||
while (e = e.offsetParent) {
|
||
T += e.offsetTop;
|
||
}
|
||
return T;
|
||
}
|
||
|
||
function lazyLoad(imgs) {
|
||
var H = document.documentElement.clientHeight;//获取可视区域高度
|
||
var S = document.documentElement.scrollTop || document.body.scrollTop;
|
||
for (var i = 0; i < imgs.length; i++) {
|
||
if (H + S > getTop(imgs[i])) {
|
||
imgs[i].src = imgs[i].getAttribute('data-src');
|
||
}
|
||
}
|
||
}
|
||
|
||
window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
|
||
lazyLoad(imgs);
|
||
}
|
||
|
||
|
||
document.addEventListener('visibilitychange', documentVisibilityChange)
|
||
global_blur = document.getElementById("global-blur")
|
||
function documentVisibilityChange() {
|
||
if (document.visibilityState === "hidden") {
|
||
global_blur.style.opacity = 1;
|
||
global_blur.style.pointerEvents = "auto";
|
||
}
|
||
if (document.visibilityState === "visible") {
|
||
}
|
||
}
|
||
|
||
function unshow_global_blur() {
|
||
global_blur.style.opacity = 0;
|
||
global_blur.style.pointerEvents = "none";
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |