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

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

@@ -19,8 +19,9 @@ function getRSS(url) {
console.log(title, link); console.log(title, link);
//在news.html页面上的ul元素中添加内容 //在news.html页面上的ul元素中添加内容
document.querySelector("ul").innerHTML += ` document.querySelector("ul").innerHTML += `
<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"> <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-title">${title}</div>
<div class="mdui-list-item-text mdui-list-item-one-line"> <div class="mdui-list-item-text mdui-list-item-one-line">
<span>${datetime}</span> <span>${datetime}</span>

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

@@ -357,3 +357,6 @@ body {
.dnone{ .dnone{
display: none; display: none;
} }
.list-news{
border-radius: 15px;
}

17
contact.html
View File

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

4
index.html
View File

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

17
message.html
View File

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

20
news.html
View File

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

17
project.html
View File

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

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