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

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
 

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 {

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时*/

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;
 }

index.html

@@ -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>

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. 优化 移动端动画及细节

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("<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) {

old/index.html

@@ -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>