v1.5 & 音乐播放器 & 移动端优化
This commit is contained in:
parent
06bf60ad49
commit
7ff8f34dbd
@ -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
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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时*/
|
||||
|
165
css/style.css
165
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;
|
||||
}
|
||||
|
Binary file not shown.
BIN
font/font_2831425_312vsfjkcz9.woff
Normal file
BIN
font/font_2831425_312vsfjkcz9.woff
Normal file
Binary file not shown.
BIN
font/font_2831425_312vsfjkcz9.woff2
Normal file
BIN
font/font_2831425_312vsfjkcz9.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
13
index.html
13
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> 打开音乐播放器</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"> v 1.4</span>
|
||||
<span class="img-text"> v 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> 点击左侧简介可弹出更多页面</span>
|
||||
<span class="uptext"><i class="iconfont icon-plus"></i> 新增音乐播放器</span>
|
||||
<span class="uptext"><i class="iconfont icon-plus"></i> 修复时间胶囊( 时光进度条 )</span>
|
||||
<span class="uptext"><i class="iconfont icon-plus"></i> 隐藏页面新增全屏弹窗</span>
|
||||
<span class="uptext"><i class="iconfont icon-plus"></i> 新增动态跟随鼠标样式</span>
|
||||
@ -356,7 +357,7 @@
|
||||
<span class="uptext"><i class="iconfont icon-wrench-fill"></i> 图标由 Fontawesome 改为
|
||||
Iconfont</span>
|
||||
<span class="uptext"><i class="iconfont icon-undo"></i> <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>
|
@ -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. 优化 移动端动画及细节
|
||||
|
37
js/music.js
37
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) {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user