caojiezi2003/Homepage-imsyy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.5 & 音乐播放器 & 移动端优化

Browse Source
This commit is contained in:
底层用户 2022-01-17 22:38:05 +08:00
parent 06bf60ad49
commit 7ff8f34dbd
13 changed files with 153 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -12,8 +12,8 @@
- [x] 日期及时间
- [x] 天气信息
- [x] 时光进度条
- [x] 音乐插件
* [ ] 音乐插件
* [ ] 没想好
### 插件
@ -23,6 +23,7 @@
* [Iconfont](https://www.iconfont.cn/)
* [Font Awesome](https://fontawesome.com/)
* [jQuery](https://jquery.com/)
* [Aplayer](https://aplayer.js.org/)
### API

6
css/font.css
View File

@ -16,9 +16,9 @@
@font-face {
font-family: "iconfont";
/* Project id 2831425 */
src: url('//at.alicdn.com/t/font_2831425_312vsfjkcz9.woff2?t=1642345600138') format('woff2'),
url('//at.alicdn.com/t/font_2831425_312vsfjkcz9.woff?t=1642345600138') format('woff'),
url('//at.alicdn.com/t/font_2831425_312vsfjkcz9.ttf?t=1642345600138') format('truetype');
src: url('../font/font_2831425_312vsfjkcz9.woff') format('woff2'),
url('../font/font_2831425_312vsfjkcz9.woff') format('woff'),
url('../font/font_2831425_312vsfjkcz9.ttf') format('truetype');
}
.iconfont {

26
css/mobile.css
View File

@ -17,6 +17,11 @@
.weekday {
display: none;
}
/*音乐播放器*/
.music-text {
max-width: 170px !important;
}
}
/*小于992px时*/
@ -135,13 +140,24 @@
/*链接卡片*/
.link-card {
height: 80px !important;
align-items: center !important;
flex-direction: column !important;
justify-content: center !important;
}
.link-card i {
font-size: 1.75rem;
}
span.link-name {
display: block !important;
font-size: 1.05rem;
}
span.line-text,
i.iconfont.icon-link {
font-size: 1.20rem;
}
/*菜单栏按钮*/
@ -171,6 +187,16 @@
font-size: 0.85rem;
}
/*音乐播放器*/
.music-text {
max-width: 100% !important;
}
/*隐藏鼠标样式*/
#cursor {
background: transparent !important;
}
}
/*小于390px时*/

165
css/style.css
View File

@ -49,6 +49,7 @@ section {
position: fixed;
width: 100%;
height: 100%;
min-height: 600px;
}
main {
@ -203,10 +204,10 @@ i.iconfont.icon-yinhao-copy {
font-size: 1.10rem;
}
.close-music {
.open-music {
display: none;
justify-content: center;
background: rgb(0 0 0 / 25%);
background: rgb(0 0 0 / 15%);
padding: 4px 0px;
animation: fade;
-webkit-animation: fade 0.5s;
@ -215,6 +216,97 @@ i.iconfont.icon-yinhao-copy {
-ms-animation: fade 0.5s;
}
.open-music:hover {
background: rgb(0 0 0 / 30%);
}
/*音乐播放器卡片*/
#music {
display: none;
}
.music {
width: 100%;
background: rgb(0 0 0 / 25%);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 6px;
height: 165px;
display: flex;
justify-content: center;
flex-direction: column;
animation: fade;
-webkit-animation: fade 0.3s;
-moz-animation: fade 0.3s;
-o-animation: fade 0.3s;
-ms-animation: fade 0.3s;
}
.music-all {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 100%;
}
.music-button {
display: flex;
align-items: center;
margin-bottom: 6px;
}
.music-control {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
width: 100%;
}
i.iconfont.icon-play,
i.iconfont.icon-pause {
font-size: 2.25rem;
padding: 6px;
border-radius: 6px;
}
i.iconfont.icon-play:hover,
i.iconfont.icon-pause:hover {
background: rgb(255 255 255 / 20%);
padding: 6px;
border-radius: 6px;
}
i#last,
i#next {
font-size: 2.0rem;
}
.music-text {
font-size: 1.15rem;
text-overflow: ellipsis;
max-width: 200px;
overflow-x: hidden;
white-space: nowrap;
}
#music-open,
#music-close {
background: rgb(255 255 255 / 15%);
padding: 2px 8px;
border-radius: 6px;
margin: 0px 6px;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
}
#music-open:hover,
#music-close:hover {
background: rgb(255 255 255 / 30%);
}
/*时间卡片*/
.time {
width: 100%;
@ -416,7 +508,8 @@ span.link-name {
transform: scale(1.2);
}
i.iconfont.icon-close {
i.iconfont.icon-close,
i.iconfont.icon-github1 {
font-size: 1.45rem;
}
@ -502,68 +595,6 @@ span.aplayer-list-index {
/*Aplayer结束*/
/*音乐播放器*/
#music {
display: none;
}
.music {
width: 100%;
background: rgb(0 0 0 / 25%);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 6px;
height: 165px;
display: flex;
justify-content: center;
flex-direction: column;
}
.music-all {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 100%;
}
.music-button {
display: flex;
align-items: center;
}
.music-control {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
width: 100%;
}
i.iconfont.icon-play,
i.iconfont.icon-pause {
font-size: 2.25rem;
}
i#last,
i#next {
font-size: 2.0rem;
}
.music-text {
font-size: 1.15rem;
text-overflow: ellipsis;
max-width: 160px;
}
#music-open,
#music-close {
background: rgb(255 255 255 / 20%);
padding: 2px 8px;
border-radius: 6px;
margin: 0px 6px;
}
/*移动端页面切换按钮*/
i.iconfont.icon-bars,
i.iconfont.icon-times {
@ -589,6 +620,10 @@ footer {
backdrop-filter: blur(10px) !important;
}
.iziToast>.iziToast-body .iziToast-title {
font-size: 16px !important;
}
.iziToast-body .iziToast-message {
line-height: 18px !important;
}

BIN
font/font_2831425_ekwvaabvo8l.ttf → font/font_2831425_312vsfjkcz9.ttf
View File

Binary file not shown.

BIN
font/font_2831425_312vsfjkcz9.woff Normal file
View File

Binary file not shown.

BIN
font/font_2831425_312vsfjkcz9.woff2 Normal file
View File

Binary file not shown.

BIN
font/font_2831425_ekwvaabvo8l.woff
View File

Binary file not shown.

BIN
font/font_2831425_ekwvaabvo8l.woff2
View File

Binary file not shown.

13
index.html
View File

@ -127,7 +127,7 @@
<!--一言-->
<div class="hitokoto cards" id="hitokoto">
<!--切换音乐-->
<div class="close-music fixed-top" id="close-music">
<div class="open-music fixed-top" id="open-music">
<i class="iconfont icon-music"></i>
<span>&nbsp;打开音乐播放器</span>
</div>
@ -155,7 +155,6 @@
</div>
<div class="music-text">
<span id="music-name">未播放音乐</span>
<span id="music-artist"></span>
</div>
</div>
</div>
@ -344,10 +343,12 @@
<div class="img-title">
<span class="img-title">imsyy</span>
<span class="img-text">.top</span>
<span class="img-text">&nbsp;&nbsp;v&nbsp;1.4</span>
<span class="img-text">&nbsp;&nbsp;v&nbsp;1.5</span>
<a href="https://github.com/imsyy/home" target="_blank"><i
class="iconfont icon-github1"></i></a>
</div>
<div class="upnote">
<span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;点击左侧简介可弹出更多页面</span>
<span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;新增音乐播放器</span>
<span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;修复时间胶囊（ 时光进度条 ）</span>
<span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;隐藏页面新增全屏弹窗</span>
<span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;新增动态跟随鼠标样式</span>
@ -356,7 +357,7 @@
<span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;图标由 Fontawesome 改为
Iconfont</span>
<span class="uptext"><i class="iconfont icon-undo"></i>&nbsp;<a href="./old/"
style="color:#efefef">返回旧版站点</a></span>
style="color:#efefef">点击此处返回旧版站点</a></span>
</div>
</div>
<div class="box-right">
@ -383,7 +384,7 @@
<script type="text/javascript" src="./js/cursor.js"></script>
<script type="text/javascript" src="./js/lantern.js"></script>
<script type="text/javascript" src="./js/music.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
</body>
</html>

6
js/main.js
View File

@ -31,11 +31,11 @@ color: rgb(30,152,255);
var title1 = '無名の主页'
var title2 = 'imsyy.top'
var content = `
版 本 号：1.4.0
更新日期：2022-01-12 14:38:34
版 本 号：1.5.0
更新日期：2022-01-16 14:38:34
更新说明：
1. 新增 部分页面样式调整
1. 新增 音乐播放器
2. 新增 动态跟随鼠标样式
3. 修复 部分控件无法点击
4. 优化 移动端动画及细节

37
js/music.js
View File

@ -1,12 +1,3 @@
/* 右键音乐图标 */
document.getElementById("music").onmousedown = function (e) {
if (e.button == 2 && $(document).width() >= 990) {
$('#box').css("display", "block");
$('#row').css("display", "none");
$('#more').css("cssText", "display:none !important");
}
}
const ap = new APlayer({
container: document.getElementById('aplayer'),
order: 'random',
@ -332,14 +323,15 @@ const ap = new APlayer({
/* 音乐通知及控制 */
ap.on('play', function () {
music = $(".aplayer-title").text() + $(".aplayer-author").text();
iziToast.info({
iconUrl: './img/play.png',
displayMode: 'replace',
title: '音乐通知',
message: '音乐开始播放'
message: '正在播放：' + '&nbsp;' + music
});
$("#play").html("<i class='iconfont icon-pause'>");
$("#music-name").html($(".aplayer-title").text());
$("#music-artist").html($(".aplayer-author").text());
$("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
});
ap.on('pause', function () {
@ -347,15 +339,15 @@ ap.on('pause', function () {
});
/* 一言与音乐切换 */
$('#close-music').on('click', function () {
$('#open-music').on('click', function () {
$('#hitokoto').css("display", "none");
$('#music').css("display", "flex");
});
$("#hitokoto").hover(function () {
$('#close-music').css("display", "flex");
$('#open-music').css("display", "flex");
}, function () {
$('#close-music').css("display", "none");
$('#open-music').css("display", "none");
})
$('#music-close').on('click', function () {
@ -366,26 +358,19 @@ $('#music-close').on('click', function () {
/* 上下曲 */
$('#play').on('click', function () {
ap.toggle();
$("#music-name").html($(".aplayer-title").text());
$("#music-artist").html($(".aplayer-author").text());
$("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
});
$('#last').on('click', function () {
ap.skipBack();
$("#music-name").html($(".aplayer-title").text());
$("#music-artist").html($(".aplayer-author").text());
$("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
});
$('#next').on('click', function () {
ap.skipForward();
$("#music-name").html($(".aplayer-title").text());
$("#music-artist").html($(".aplayer-author").text());
$("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
});
/*
$("#a").click(function () {
$("#b").toggle()
})
*/
/* 打开音乐列表 */
$('#music-open').on('click', function () {
if ($(document).width() >= 990) {

3
old/index.html
View File

@ -165,8 +165,7 @@
</div>
<div class="remark iUp">
<p class="power">Copyright © 2020
<script>document.write(' - ' + (new Date()).getFullYear())</script> 無名 | <a
href="https://beian.miit.gov.cn/" target="_blank">豫ICP备20013231-2 号</a>
<script>document.write(' - ' + (new Date()).getFullYear())</script> 無名
</p>
</div>
</header>