diff --git a/README.md b/README.md index 2af8df4..a35a46f 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/css/font.css b/css/font.css index 76c35d3..e96386c 100644 --- a/css/font.css +++ b/css/font.css @@ -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 { diff --git a/css/mobile.css b/css/mobile.css index be5a9bf..328345b 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -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时*/ diff --git a/css/style.css b/css/style.css index 586f26a..4ab9426 100644 --- a/css/style.css +++ b/css/style.css @@ -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; } diff --git a/font/font_2831425_ekwvaabvo8l.ttf b/font/font_2831425_312vsfjkcz9.ttf similarity index 69% rename from font/font_2831425_ekwvaabvo8l.ttf rename to font/font_2831425_312vsfjkcz9.ttf index 5278118..e43c1b5 100644 Binary files a/font/font_2831425_ekwvaabvo8l.ttf and b/font/font_2831425_312vsfjkcz9.ttf differ diff --git a/font/font_2831425_312vsfjkcz9.woff b/font/font_2831425_312vsfjkcz9.woff new file mode 100644 index 0000000..e6aefff Binary files /dev/null and b/font/font_2831425_312vsfjkcz9.woff differ diff --git a/font/font_2831425_312vsfjkcz9.woff2 b/font/font_2831425_312vsfjkcz9.woff2 new file mode 100644 index 0000000..10c555d Binary files /dev/null and b/font/font_2831425_312vsfjkcz9.woff2 differ diff --git a/font/font_2831425_ekwvaabvo8l.woff b/font/font_2831425_ekwvaabvo8l.woff deleted file mode 100644 index d5f77e4..0000000 Binary files a/font/font_2831425_ekwvaabvo8l.woff and /dev/null differ diff --git a/font/font_2831425_ekwvaabvo8l.woff2 b/font/font_2831425_ekwvaabvo8l.woff2 deleted file mode 100644 index 05c21c8..0000000 Binary files a/font/font_2831425_ekwvaabvo8l.woff2 and /dev/null differ diff --git a/index.html b/index.html index a820270..a5b7f40 100644 --- a/index.html +++ b/index.html @@ -127,7 +127,7 @@
-
+
 打开音乐播放器
@@ -155,7 +155,6 @@
未播放音乐 -
@@ -344,10 +343,12 @@
imsyy .top -   v 1.4 +   v 1.5 +
-  点击左侧简介可弹出更多页面 +  新增音乐播放器  修复时间胶囊（ 时光进度条 ）  隐藏页面新增全屏弹窗  新增动态跟随鼠标样式 @@ -356,7 +357,7 @@  图标由 Fontawesome 改为 Iconfont  返回旧版站点 + style="color:#efefef">点击此处返回旧版站点
@@ -383,7 +384,7 @@ - + \ No newline at end of file diff --git a/js/main.js b/js/main.js index cfee580..ce6dfa0 100644 --- a/js/main.js +++ b/js/main.js @@ -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. 优化 移动端动画及细节 diff --git a/js/music.js b/js/music.js index 3d76421..9a44f95 100644 --- a/js/music.js +++ b/js/music.js @@ -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: '正在播放：' + ' ' + music }); $("#play").html(""); - $("#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) { diff --git a/old/index.html b/old/index.html index eb60cdf..c16f809 100644 --- a/old/index.html +++ b/old/index.html @@ -165,8 +165,7 @@

Copyright © 2020 - 無名 | 豫ICP备20013231-2 号 + 無名