v1.6 & fix cdn

This commit is contained in:
底层用户 2022-01-29 13:09:21 +08:00
parent 1c9441e606
commit d07179342c
11 changed files with 136 additions and 28 deletions

View File

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

View File

@ -16,9 +16,9 @@
@font-face { @font-face {
font-family: "iconfont"; font-family: "iconfont";
/* Project id 2831425 */ /* 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 { .iconfont {
@ -29,6 +29,22 @@
-moz-osx-font-smoothing: grayscale; -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 { .icon-music:before {
content: "\e986"; content: "\e986";
} }

View File

@ -282,6 +282,12 @@ i.iconfont.icon-yinhao-copy {
width: 100%; width: 100%;
} }
.music-menu {
height: 26px;
display: flex;
align-items: center;
}
i.iconfont.icon-play, i.iconfont.icon-play,
i.iconfont.icon-pause { i.iconfont.icon-pause {
font-size: 2.25rem; font-size: 2.25rem;
@ -307,6 +313,11 @@ i#next {
max-width: 220px; max-width: 220px;
overflow-x: hidden; overflow-x: hidden;
white-space: nowrap; 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, #music-open,
@ -325,6 +336,58 @@ i#next {
background: rgb(255 255 255 / 30%); 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 { .col.times {
margin-left: 0.75rem; margin-left: 0.75rem;
@ -676,7 +739,7 @@ footer {
} }
.iziToast-message.slideIn { .iziToast-message.slideIn {
margin-top: 5px !important; margin-top: 8px !important;
} }
.iziToast-message { .iziToast-message {

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -29,7 +29,8 @@
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png"> <link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
<!-- Izitoast --> <!-- Izitoast -->
<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/izitoast/1.4.0/css/iziToast.min.css"> <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> </script>
<!-- Aplayer --> <!-- Aplayer -->
<link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css" <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css"
@ -144,9 +145,18 @@
</div> </div>
<i class="iconfont icon-next-one" id="next"></i> <i class="iconfont icon-next-one" id="next"></i>
</div> </div>
<div class="music-menu">
<div class="music-text"> <div class="music-text">
<span id="music-name">未播放音乐</span> <span id="music-name">未播放音乐</span>
</div> </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>
</div> </div>
</div> </div>
@ -337,19 +347,17 @@
<div class="img-title"> <div class="img-title">
<span class="img-title">imsyy</span> <span class="img-title">imsyy</span>
<span class="img-text">.top</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 <a href="https://github.com/imsyy/home" target="_blank"><i
class="iconfont icon-github1"></i></a> class="iconfont icon-github1"></i></a>
</div> </div>
<div class="upnote"> <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-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;移动端动画及细节</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/" <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>
@ -383,8 +391,8 @@
<script type="text/javascript" src="./js/time.js"></script> <script type="text/javascript" src="./js/time.js"></script>
<script type="text/javascript" src="./js/cursor.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/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> </script>
</body> </body>

View File

@ -23,7 +23,6 @@ else window.onload = downloadJSAtOnload;
//弹窗样式 //弹窗样式
iziToast.settings({ iziToast.settings({
timeout: 10000, timeout: 10000,
//icon: 'Fontawesome',
closeOnEscape: 'true', closeOnEscape: 'true',
position: 'topLeft', position: 'topLeft',
transitionIn: 'bounceInRight', transitionIn: 'bounceInRight',
@ -226,7 +225,7 @@ $("#more").hover(function () {
//屏蔽右键 //屏蔽右键
document.oncontextmenu = function () { document.oncontextmenu = function () {
iziToast.info({ iziToast.info({
//icon: 'fad fa-do-not-enter', timeout: 4000,
iconUrl: './img/warn.png', iconUrl: './img/warn.png',
title: '温馨提醒', title: '温馨提醒',
message: '为了浏览体验,本站禁用右键' message: '为了浏览体验,本站禁用右键'
@ -249,7 +248,6 @@ for (var day of days) {
$("#change1").html("今天是国家纪念日,全站已切换为黑白模式"); $("#change1").html("今天是国家纪念日,全站已切换为黑白模式");
iziToast.info({ iziToast.info({
timeout: 14000, timeout: 14000,
//icon: 'fad fa-candle-holder',
iconUrl: './img/candle.png', iconUrl: './img/candle.png',
title: '今天是国家纪念日', title: '今天是国家纪念日',
message: '历史不会忘记,人民永远铭记!' message: '历史不会忘记,人民永远铭记!'
@ -280,18 +278,17 @@ var title2 = `
|_____|_| |_|_____/ |_| |_| |_____|_| |_|_____/ |_| |_|
` `
var content = ` 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 Github: https://github.com/imsyy/home
` `
console.log(`%c${title1} %c${title2} console.log(`%c${title1} %c${title2}

View File

@ -411,6 +411,7 @@ setInterval(function () {
ap.on('play', function () { ap.on('play', function () {
music = $(".aplayer-title").text() + $(".aplayer-author").text(); music = $(".aplayer-title").text() + $(".aplayer-author").text();
iziToast.info({ iziToast.info({
timeout: 6000,
iconUrl: './img/play.png', iconUrl: './img/play.png',
displayMode: 'replace', displayMode: 'replace',
title: '音乐通知', 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 () { $('#open-music').on('click', function () {
$('#hitokoto').css("display", "none"); $('#hitokoto').css("display", "none");