v1.6 & fix cdn

css/cursor.css

@@ -26,5 +26,5 @@
 }
 
 * {
-    cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important
+    cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important;
 }

css/font.css

@@ -16,9 +16,9 @@
 @font-face {
     font-family: "iconfont";
     /* Project id 2831425 */
-    src: url('../font/font_2831425_312vsfjkcz9.woff') format('woff2'),
+    src: url('../font/font_2831425_x34rhwyvdnp.woff2') format('woff2'),
-        url('../font/font_2831425_312vsfjkcz9.woff') format('woff'),
+        url('../font/font_2831425_x34rhwyvdnp.woff') format('woff'),
-        url('../font/font_2831425_312vsfjkcz9.ttf') format('truetype');
+        url('../font/font_2831425_x34rhwyvdnp.ttf') format('truetype');
 }
 
 .iconfont {
@@ -29,6 +29,22 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-volume-x:before {
+    content: "\e67a";
+}
+
+.icon-volume-1:before {
+    content: "\e67b";
+}
+
+.icon-volume:before {
+    content: "\e67c";
+}
+
+.icon-volume-2:before {
+    content: "\e67d";
+}
+
 .icon-music:before {
     content: "\e986";
 }

css/style.css

@@ -282,6 +282,12 @@ i.iconfont.icon-yinhao-copy {
     width: 100%;
 }
 
+.music-menu {
+    height: 26px;
+    display: flex;
+    align-items: center;
+}
+
 i.iconfont.icon-play,
 i.iconfont.icon-pause {
     font-size: 2.25rem;
@@ -307,6 +313,11 @@ i#next {
     max-width: 220px;
     overflow-x: hidden;
     white-space: nowrap;
+    animation: fade;
+    -webkit-animation: fade 0.5s;
+    -moz-animation: fade 0.5s;
+    -o-animation: fade 0.5s;
+    -ms-animation: fade 0.5s;
 }
 
 #music-open,
@@ -325,6 +336,58 @@ i#next {
     background: rgb(255 255 255 / 30%);
 }
 
+.music-volume {
+    margin-top: 6px;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    animation: fade;
+    -webkit-animation: fade 0.5s;
+    -moz-animation: fade 0.5s;
+    -o-animation: fade 0.5s;
+    -ms-animation: fade 0.5s;
+}
+
+#volume-ico {
+    padding-top: 1px;
+    margin-right: 6px;
+}
+
+.music-volume i {
+    font-size: 1.75rem;
+}
+
+input[type=range] {
+    -webkit-appearance: none;
+    width: 100%;
+    border-radius: 10px;
+    height: 8px;
+    background: rgb(255 255 255 / 15%);
+}
+
+input[type=range]::-webkit-slider-thumb,
+input[type=range]::-moz-range-thumb {
+    -webkit-appearance: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track,
+input[type=range]::-moz-range-track {
+    height: 15px;
+    border-radius: 10px;
+}
+
+input[type=range]:focus {
+    outline: none;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 15px;
+    width: 15px;
+    background: #ffffff;
+    border-radius: 50%;
+}
+
 /*时间卡片*/
 .col.times {
     margin-left: 0.75rem;
@@ -676,7 +739,7 @@ footer {
 }
 
 .iziToast-message.slideIn {
-    margin-top: 5px !important;
+    margin-top: 8px !important;
 }
 
 .iziToast-message {

index.html

@@ -29,7 +29,8 @@
     <link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
     <!-- Izitoast -->
     <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/izitoast/1.4.0/css/iziToast.min.css">
-    <script type="text/javascript" src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/izitoast/1.4.0/js/iziToast.min.js">
+    <script type="text/javascript"
+        src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/izitoast/1.4.0/js/iziToast.min.js">
     </script>
     <!-- Aplayer -->
     <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css"
@@ -144,8 +145,17 @@
                                                 </div>
                                                 <i class="iconfont icon-next-one" id="next"></i>
                                             </div>
-                                            <div class="music-text">
+                                            <div class="music-menu">
-                                                <span id="music-name">未播放音乐</span>
+                                                <div class="music-text">
+                                                    <span id="music-name">未播放音乐</span>
+                                                </div>
+                                                <div class="music-volume" style="display: none;">
+                                                    <div id="volume-ico">
+                                                        <i class="iconfont icon-volume-1"></i>
+                                                    </div>
+                                                    <input type="range" min="0" max="1" step="0.1" id="volume"
+                                                        oninput="changevolume()">
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
@@ -337,19 +347,17 @@
                             <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.5</span>
+                                <span class="img-text">&nbsp;&nbsp;v&nbsp;1.6</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>
+                                <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;修复 CDN 加载缓慢</span>
                                 <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;时光胶囊显示错误</span>
                                 <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;移动端动画及细节</span>
-                                <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;图标由 Fontawesome 改为
+                                <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;图标改为 Iconfont</span>
-                                    Iconfont</span>
                                 <span class="uptext"><i class="iconfont icon-undo"></i>&nbsp;<a href="./old/"
                                         style="color:#efefef">点击此处返回旧版站点</a></span>
                             </div>
@@ -383,8 +391,8 @@
     <script type="text/javascript" src="./js/time.js"></script>
     <script type="text/javascript" src="./js/cursor.js"></script>
     <script type="text/javascript" src="./js/lantern.js" defer></script>
-    <!-- <script type="text/javascript" src="./js/music.js" defer></script> -->
+    <script type="text/javascript"
-    <script type="text/javascript" src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.0/js/bootstrap.min.js">
+        src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.0/js/bootstrap.min.js">
     </script>
 </body>
 

js/main.js

@@ -23,7 +23,6 @@ else window.onload = downloadJSAtOnload;
 //弹窗样式
 iziToast.settings({
     timeout: 10000,
-    //icon: 'Fontawesome',
     closeOnEscape: 'true',
     position: 'topLeft',
     transitionIn: 'bounceInRight',
@@ -226,7 +225,7 @@ $("#more").hover(function () {
 //屏蔽右键
 document.oncontextmenu = function () {
     iziToast.info({
-        //icon: 'fad fa-do-not-enter',
+        timeout: 4000,
         iconUrl: './img/warn.png',
         title: '温馨提醒',
         message: '为了浏览体验，本站禁用右键'
@@ -249,7 +248,6 @@ for (var day of days) {
         $("#change1").html("今天是国家纪念日，全站已切换为黑白模式");
         iziToast.info({
             timeout: 14000,
-            //icon: 'fad fa-candle-holder',
             iconUrl: './img/candle.png',
             title: '今天是国家纪念日',
             message: '历史不会忘记，人民永远铭记！'
@@ -280,18 +278,17 @@ var title2 = `
 |_____|_|  |_|_____/   |_|      |_|                                                     
 `
 var content = `
-版 本 号：1.5.2
+版 本 号：1.6
-更新日期：2022-01-20
+更新日期：2022-01-30
 
 更新说明：
-1. 新增 音乐播放器
+1. 新增 音乐播放器支持音量控制
-2. 新增 开屏载入动画
+2. 修复 CDN 加载缓慢
-3. 修复 部分边距不一致
+3. 优化 部分动画及细节
-4. 优化 移动端动画及细节
+4. 优化 页面加载缓慢
-5. 优化 页面加载缓慢
+5. 优化 音乐列表延迟加载
-6. 修复 时光胶囊显示错误
 
-主页:  https://imsyy.top
+主页:  https://www.imsyy.top
 Github:  https://github.com/imsyy/home
 `
 console.log(`%c${title1} %c${title2}

js/music.js

@@ -411,6 +411,7 @@ setInterval(function () {
 ap.on('play', function () {
     music = $(".aplayer-title").text() + $(".aplayer-author").text();
     iziToast.info({
+        timeout: 6000,
         iconUrl: './img/play.png',
         displayMode: 'replace',
         title: '音乐通知',
@@ -432,6 +433,29 @@ ap.on('pause', function () {
     }
 });
 
+//音量调节
+function changevolume() {
+    var x = $("#volume").val();
+    ap.volume(x, true);
+    if (x == 0) {
+        $("#volume-ico").html("<i class='iconfont icon-volume-x'></i>");
+    } else if (x > 0 && x <= 0.3) {
+        $("#volume-ico").html("<i class='iconfont icon-volume'></i>");
+    } else if (x > 0.3 && x <= 0.6) {
+        $("#volume-ico").html("<i class='iconfont icon-volume-1'></i>");
+    } else {
+        $("#volume-ico").html("<i class='iconfont icon-volume-2'></i>");
+    }
+}
+
+$("#music").hover(function () {
+    $('.music-text').css("display", "none");
+    $('.music-volume').css("display", "flex");
+}, function () {
+    $('.music-text').css("display", "block");
+    $('.music-volume').css("display", "none");
+})
+
 /* 一言与音乐切换 */
 $('#open-music').on('click', function () {
     $('#hitokoto').css("display", "none");