Akatsuki-Misaki/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改加载效果

Browse Source
This commit is contained in:
hanasaki-misaki
2023-03-18 13:52:27 +08:00
parent 964c085c19
commit e8b1d475e6
8 changed files with 98 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
Static/Gui/js/new_Rss.js
View File

@@ -19,12 +19,13 @@ function getRSS(url) {
console.log(title, link);
//在news.html页面上的ul元素中添加内容
document.querySelector("ul").innerHTML += `
<a href="${link}" target="_blank">
<li class="idc dnone mdui-list-item mdui-ripple mdui-shadow-12" style="backdrop-filter: blur(8px);overflow-x:hidden">
<div class="mdui-list-item-title">${title}</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span>${datetime}</span>
</div>
<li class="list-news idc dnone mdui-list-item mdui-ripple mdui-shadow-12" style="backdrop-filter: blur(8px);overflow-x:hidden;padding-top: 14px;padding-bottom: 14px;">
<a href="${link}" target="_blank">
<div class="mdui-list-item-title">${title}</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span>${datetime}</span>
</div>
</a>
</li>
`;

3
Static/mdui-v1.0.1/css/ui.css
View File

@@ -356,4 +356,7 @@ body {
.dnone{
display: none;
}
.list-news{
border-radius: 15px;
}

19
contact.html
View File

@@ -29,6 +29,13 @@
</script>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-blue mdui-loaded" id="p-d">
<!-- loading start -->
<div id="loading">
<span>
<img src="Static\Gui\img\Moe.png"/>
</span>
</div>
<!-- loading end -->
<div class="home-bodg"></div>
<div>
@@ -170,8 +177,16 @@
<script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
<script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
<script>
// 初始化 WOW.js
new WOW().init();
$(window).on('load', function (callback) {
$('body').css({overflow: 'hidden'});
setTimeout(function () {
$('body').css({overflow: 'auto'});
$('#loading').fadeOut(1000);
new WOW().init();
callback && callback();
clearTimeout(loadTimer);
}, 500);
});
</script>
</body>
</html>

4
index.html
View File

@@ -230,7 +230,7 @@
<script>
// 网页资源加载完成等待2s后关闭id类为loading动画
// 网页资源加载完成等待500ms后关闭id类为loading动画
$(window).on('load', function (callback) {
$('body').css({overflow: 'hidden'});
$('body').removeClass('wow-animate__animated');
@@ -240,7 +240,7 @@
new WOW().init();
callback && callback();
clearTimeout(loadTimer);
}, 2000);
}, 5000);
});
</script>
</body>

19
message.html
View File

@@ -29,6 +29,13 @@
</script>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-blue mdui-loaded" id="p-d">
<!-- loading start -->
<div id="loading">
<span>
<img src="Static\Gui\img\Moe.png"/>
</span>
</div>
<!-- loading end -->
<div class="home-bodg"></div>
<!--PC toolbar-->
@@ -160,8 +167,16 @@
<script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
<script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
<script>
// 初始化 WOW.js
new WOW().init();
$(window).on('load', function (callback) {
$('body').css({overflow: 'hidden'});
setTimeout(function () {
$('body').css({overflow: 'auto'});
$('#loading').fadeOut(1000);
new WOW().init();
callback && callback();
clearTimeout(loadTimer);
}, 500);
});
</script>
</body>
</html>

22
news.html
View File

@@ -31,6 +31,13 @@
</script>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-blue mdui-loaded" id="p-d">
<!-- loading start -->
<div id="loading">
<span>
<img src="Static\Gui\img\Moe.png"/>
</span>
</div>
<!-- loading end -->
<div class="home-bodg"></div>
<div>
@@ -165,12 +172,17 @@
<script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
<script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
<script>
// 页面加载完成后执行
$(function () {
// 初始化 wow.js
new WOW().init();
$(window).on('load', function (callback) {
$('body').css({overflow: 'hidden'});
setTimeout(function () {
$('body').css({overflow: 'auto'});
$('#loading').fadeOut(1000);
new WOW().init();
callback && callback();
clearTimeout(loadTimer);
}, 500);
});
</script>
</script>
</body>
</html>

19
project.html
View File

@@ -29,6 +29,13 @@
</script>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-blue mdui-loaded" id="p-d">
<!-- loading start -->
<div id="loading">
<span>
<img src="Static\Gui\img\Moe.png"/>
</span>
</div>
<!-- loading end -->
<div class="home-bodg"></div>
<div>
@@ -170,8 +177,16 @@
<script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
<script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
<script>
// 初始化 WOW.js
new WOW().init();
$(window).on('load', function (callback) {
$('body').css({overflow: 'hidden'});
setTimeout(function () {
$('body').css({overflow: 'auto'});
$('#loading').fadeOut(1000);
new WOW().init();
callback && callback();
clearTimeout(loadTimer);
}, 500);
});
</script>
</body>
</html>

27
staff.html
View File

@@ -10,15 +10,16 @@
<link rel="stylesheet" href="Static\mdui-v1.0.1\css\ui.css">
<link rel="stylesheet" href="Static\mdui-v1.0.1\css\animate.min.css">
<link rel="stylesheet" href="Static\bootstrap-4.6.2-dist\css\bootstrap.min.css">
<style>
body{
overflow:hidden;
}
</style>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-blue mdui-loaded" id="p-d">
<!-- loading start -->
<div id="loading">
<span>
<img src="Static\Gui\img\Moe.png"/>
</span>
</div>
<!-- loading end -->
<div class="home-bodg"></div>
<div>
<!--PC toolbar-->
<div class="mdui-hidden-lok-down">
@@ -181,11 +182,19 @@
<script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
<script>
// 网页完成前阻止滚动条网页加载完成后恢复滚动条
$(document).ready(function () {
$("body").css("overflow", "auto");
// 网页资源加载完成等待500ms后关闭id类为loading动画
$(window).on('load', function (callback) {
$('body').css({overflow: 'hidden'});
$('body').removeClass('wow-animate__animated');
$('.idc').removeClass('dnone');
$('.idc').addClass('wow animate__animated animate__fadeInRight');
new WOW().init();
setTimeout(function () {
$('body').css({overflow: 'auto'});
$('#loading').fadeOut(1000);
new WOW().init();
callback && callback();
clearTimeout(loadTimer);
}, 500);
});
</script>
</body>