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 10:13:09 +08:00
parent 32c6fec48f
commit 479a3a287e
10 changed files with 136 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
Static/Gui/js/new_Rss.js Normal file
View File

@@ -0,0 +1,44 @@
//定义一个函数来获取rss文件
function getRSS(url) {
//使用fetch API来调用url
fetch(url)
.then(response => response.text()) //将响应解析为文本
.then(str => new window.DOMParser().parseFromString(str, "text/xml")) //将文本解析为XML对象
.then(data => {
//从XML对象中获取channel元素
const channel = data.querySelector("channel");
//从channel元素中获取所有item元素
const items = channel.querySelectorAll("item");
//遍历每个item元素
items.forEach(item => {
//从item元素中获取title和link元素的文本内容
const title = item.querySelector("title").textContent;
const link = item.querySelector("link").textContent;
const datetime = item.querySelector("pubDate").textContent;
//在控制台打印标题和链接
console.log(title, link);
//在news.html页面上的ul元素中添加内容
document.querySelector("ul").innerHTML += `
<a href="${link}" target="_blank">
<li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" 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>
</a>
</li>
`;
//若是没有更多的item元素，则在页面添加没有内容”
if (items.length === 0) {
document.querySelector("ul").innerHTML += `
<li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
<div class="mdui-list-item-title">没有内容</div>
</li>
`;
}
});
});
}
//调用函数，传入rss文件的url（这里是一个示例）
getRSS("http://www.mikumo.top/?feed=rss2");

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

@@ -1,6 +1,12 @@
/* 去除左右滚动 */
body{
overflow-x:hidden;
overflow-x:hidden!important;
}
/* a标签去除下划线 */
a{
text-decoration:none!important;
}
/* loading start */
#loading {
position: fixed;
@@ -9,7 +15,7 @@ body{
left: 0;
right: 0;
z-index: 10000;
background-color: #242222;
background-color: #4d4a4a;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
@@ -18,14 +24,10 @@ body{
justify-content: center;
align-items: center;
}
#loading span {
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid #777777;
border-top-color: #fff;
#loading span img {
width: 100%;
height: 100%;
position: relative;
animation: loadingA 1s linear infinite;
}
@keyframes loadingA {
from {}

15
Static/mdui-v1.0.1/js/wow_init.js Normal file
View File

@@ -0,0 +1,15 @@
wow = new WOW({
boxClass: 'wow',
// 当用户滚动时显示隐藏框的类名称
animateClass: 'animate__animated',
// 触发 CSS 动画的类名称（动画库默认为"animate.css"库）
offset: 0,
// 定义浏览器视口底部与隐藏框顶部之间的距离。
// 当用户滚动并到达此距离时，将显示隐藏的框。
mobile: false,
// 在移动设备上打开/关闭wow.js。
// 经测试此项配置无效。
live: true
// 在页面上检查新的 wow.js元素。
})
wow.init();

4
contact.html
View File

@@ -36,11 +36,11 @@
<div class="mdui-hidden-lok-down">
<div class="mdui-toolbar mdui-toolbarb">
<a href="/index.html">
<div class="mdui-valign animate__animated animate__fadeInLeft">
<div class="wow mdui-valign animate__animated animate__fadeInLeft">
<img src="Static\Gui\img\Moe.png" width="150px">
</div>
</a>
<div class="mdui-center font-ui animate__animated animate__fadeInDown">
<div class="wow mdui-center font-ui animate__animated animate__fadeInDown">
<div class="mdui-tab" mdui-tab="">
<a href="./index.html" class="mdui-rippl">
<label>首页/home</label>

33
index.html
View File

@@ -12,14 +12,16 @@
<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>
</style>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-blue mdui-loaded" id="p-d">
<!-- loading start -->
<div id="loading">
<span></span>
<span>
<img src="Static\Gui\img\Moe.png"/>
</span>
</div>
<!-- loading end -->
<div class="home-bodg"></div>
@@ -27,16 +29,13 @@
<div>
<!--PC toolbar-->
<div class="mdui-hidden-lok-down">
<div class="mdui-progress">
<div class="mdui-progress-indeterminate"></div>
</div>
<div class="mdui-toolbar mdui-toolbarb">
<a href="/index.html">
<div class="mdui-valign animate__animated animate__fadeInLeft">
<div class="wow mdui-valign animate__animated animate__fadeInLeft">
<img src="Static\Gui\img\Moe.png" width="150px">
</div>
</a>
<div class="mdui-center font-ui animate__animated animate__fadeInDown">
<div class="wow mdui-center font-ui animate__animated animate__fadeInDown">
<div class="mdui-tab" mdui-tab="">
<a href="./index.html" class="mdui-ripple mdui-tab-active">
<label>首页/home</label>
@@ -99,7 +98,7 @@
<!--pc text-->
<div class="mdui-hidden-xs-down zhe " style="height:200vh">
<div class="mdui-container">
<div id="carouselExampleCaptions" class="carousel slide banner animate__animated animate__fadeInRight" data-ride="carousel">
<div id="carouselExampleCaptions" class="wow carousel slide banner animate__animated animate__fadeInRight" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
@@ -228,21 +227,21 @@
<script src="Static\mdui-v1.0.1\js\mdui.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>
// 初始化 WOW.js
new WOW().init();
</script>
<script>
// 3秒后关闭loading动画
$(document).ready(function () {
// 网页资源加载完成等待2s后关闭id类为loading动画
$(window).on('load', function (callback) {
$('body').css({overflow: 'hidden'});
$('body').removeClass('wow-animate__animated');
setTimeout(function () {
$('body').css({overflow: 'auto'});
$('#loading').fadeOut();
}, 3000);
$('#loading').fadeOut(1000);
new WOW().init();
callback && callback();
clearTimeout(loadTimer);
}, 2000);
});
</script>
</body>

4
message.html
View File

@@ -38,11 +38,11 @@
</div>
<div class="mdui-toolbar mdui-toolbarb">
<a href="/index.html">
<div class="mdui-valign animate__animated animate__fadeInLeft">
<div class="wow mdui-valign animate__animated animate__fadeInLeft">
<img src="Static\Gui\img\Moe.png" width="150px">
</div>
</a>
<div class="mdui-center font-ui animate__animated animate__fadeInDown">
<div class="wow mdui-center font-ui animate__animated animate__fadeInDown">
<div class="mdui-tab" mdui-tab="">
<a href="./index.html" class="mdui-ripple">
<label>首页/home</label>

40
news.html
View File

@@ -34,13 +34,16 @@
<div>
<!--PC toolbar-->
<div class="mdui-hidden-lok-down">
<div class="mdui-progress" id="loadprogress">
<div class="mdui-progress-indeterminate"></div>
</div>
<div class="mdui-toolbar mdui-toolbarb">
<a href="/index.html">
<div class="mdui-valign animate__animated animate__fadeInLeft">
<div class="wow mdui-valign animate__animated animate__fadeInLeft">
<img src="Static\Gui\img\Moe.png" width="150px">
</div>
</a>
<div class="mdui-center font-ui animate__animated animate__fadeInDown">
<div class="wow mdui-center font-ui animate__animated animate__fadeInDown">
<div class="mdui-tab" mdui-tab="">
<a href="./index.html" class="mdui-rippl">
<label>首页/home</label>
@@ -105,18 +108,7 @@
<div class="mdui-hidden-xs-down zhe " style="height:100vh">
<div class="mdui-container">
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
<a href="#">
<div class="mdui-list-item-content">
<a href="#">
<div class="mdui-list-item-title">暂无内容</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span>2023-03-13</span>
</div>
</a>
</div>
</a>
</li>
</ul>
</div>
@@ -165,13 +157,29 @@
</div>
</footer>
<script src="https://npm.akass.cn/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="Static\Gui\js\new_Rss.js" type="text/javascript"></script>
<script src="Static\mdui-v1.0.1\js\wow.js" type="text/javascript"></script>
<script src="Static\mdui-v1.0.1\js\mdui.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>
// 初始化 WOW.js
new WOW().init();
// 未加载完成网页资源前需要阻止所有动画效果网页资源加载完成后隐藏div id类为loadprogress的元素
$(window).on('load', function (callback) {
$('body').css({overflow: 'hidden'});
$('body').removeClass('wow-animate__animated');
setTimeout(function () {
$('body').css({overflow: 'auto'});
$('#loadprogress').hide();
new_Rss();
new WOW().init();
callback && callback();
clearTimeout(loadTimer);
}, 2000);
});
// 加载完成后再运行new_Rss.js
</script>
</body>
</html>

4
project.html
View File

@@ -33,8 +33,8 @@
<div>
<!--PC toolbar-->
<div class="mdui-hidden-lok-down">
<div class="mdui-toolbar mdui-toolbarb">
<div class="wow mdui-hidden-lok-down">
<div class="wow mdui-toolbar mdui-toolbarb">
<a href="/index.html">
<div class="mdui-valign animate__animated animate__fadeInLeft">
<img src="Static\Gui\img\Moe.png" width="150px">

29
staff.html
View File

@@ -36,11 +36,11 @@
<div class="mdui-hidden-lok-down">
<div class="mdui-toolbar mdui-toolbarb">
<a href="/index.html">
<div class="mdui-valign animate__animated animate__fadeInLeft">
<div class="wow mdui-valign animate__animated animate__fadeInLeft">
<img src="Static\Gui\img\Moe.png" width="150px">
</div>
</a>
<div class="mdui-center font-ui animate__animated animate__fadeInDown">
<div class="wow mdui-center font-ui animate__animated animate__fadeInDown">
<div class="mdui-tab" mdui-tab="">
<a href="./index.html" class="mdui-ripple">
<label>首页/home</label>
@@ -137,27 +137,27 @@
<div style="width: 90%;height:100vh" class="mdui-center">
<div class="mdui-container">
<div style="margin-left:-(width/2)">
<div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="200ms">
<img class="mdui-chip-icon" src="https://avatars.githubusercontent.com/u/125862745?v=4"/>
<div class="idc mdui-chip " data-wow-delay="200ms">
<img class="idc mdui-chip-icon" src="https://avatars.githubusercontent.com/u/125862745?v=4"/>
<span class="mdui-chip-title">Akatsuki-Misaki</span>
</div>
<div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="300ms">
<div class="idc mdui-chip " data-wow-delay="300ms">
<img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=3280751036&s=100"/>
<span class="mdui-chip-title">Cheng</span>
</div>
<div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="400ms">
<div class="idc mdui-chip " data-wow-delay="400ms">
<img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=2327680068&s=100"/>
<span class="mdui-chip-title">yuanzhi</span>
</div>
<div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="500ms">
<div class="idc mdui-chip " data-wow-delay="500ms">
<img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=3052013768&s=100"/>
<span class="mdui-chip-title">CcranesQ</span>
</div>
<div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="600ms">
<div class="idc mdui-chip " data-wow-delay="600ms">
<img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=2274889340&s=100"/>
<span class="mdui-chip-title">xing_cheng</span>
</div>
<div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="700ms">
<div class="idc mdui-chip" data-wow-delay="700ms">
<img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=1345708097&s=100"/>
<span class="mdui-chip-title">yun_luo</span>
</div>
@@ -192,8 +192,15 @@
<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 {
$('body').css({overflow: 'hidden'});
setTimeout(function () {
$('body').css({overflow: 'auto'});
$('#loadprogress').hide();
new WOW().init();
$('.idc').addClass('wow animate__animated animate__fadeInRight');
});
});
</script>
</body>
</html>

4
ui.html
View File

@@ -36,11 +36,11 @@
<div class="mdui-hidden-lok-down">
<div class="mdui-toolbar mdui-toolbarb">
<a href="/index.html">
<div class="mdui-valign animate__animated animate__fadeInLeft">
<div class="wow mdui-valign animate__animated animate__fadeInLeft">
<img src="Static\Gui\img\Moe.png" width="150px">
</div>
</a>
<div class="mdui-center font-ui animate__animated animate__fadeInDown">
<div class="wow mdui-center font-ui animate__animated animate__fadeInDown">
<div class="mdui-tab" mdui-tab="">
<a href="./index.html" class="mdui-ripple mdui-tab-active">
<label>首页/home</label>