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

v1.6 & fix cdn

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/cursor.css
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;
}

22
css/font.css
View File

@ -16,9 +16,9 @@
@font-face {
font-family: "iconfont";
/* Project id 2831425 */
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');
src: url('../font/font_2831425_x34rhwyvdnp.woff2') format('woff2'),
url('../font/font_2831425_x34rhwyvdnp.woff') format('woff'),
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";
}

65
css/style.css
View File

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

BIN
font/font_2831425_312vsfjkcz9.woff
View File

Binary file not shown.

BIN
font/font_2831425_312vsfjkcz9.woff2
View File

Binary file not shown.

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

Binary file not shown.

BIN
font/font_2831425_x34rhwyvdnp.woff Normal file
View File

Binary file not shown.

BIN
font/font_2831425_x34rhwyvdnp.woff2 Normal file
View File

Binary file not shown.

26
index.html
View File

@ -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,9 +145,18 @@
</div>
<i class="iconfont icon-next-one" id="next"></i>
</div>
<div class="music-menu">
<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>
</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 改为
Iconfont</span>
<span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;图标改为 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" src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.0/js/bootstrap.min.js">
<script type="text/javascript"
src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.0/js/bootstrap.min.js">
</script>
</body>

21
js/main.js
View File

@ -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
更新日期：2022-01-20
版 本 号：1.6
更新日期：2022-01-30
更新说明：
1. 新增 音乐播放器
2. 新增 开屏载入动画
3. 修复 部分边距不一致
4. 优化 移动端动画及细节
5. 优化 页面加载缓慢
6. 修复 时光胶囊显示错误
1. 新增 音乐播放器支持音量控制
2. 修复 CDN 加载缓慢
3. 优化 部分动画及细节
4. 优化 页面加载缓慢
5. 优化 音乐列表延迟加载
主页: https://imsyy.top
主页: https://www.imsyy.top
Github: https://github.com/imsyy/home
`
console.log(`%c${title1} %c${title2}

24
js/music.js
View File

@ -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");