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

新增 壁纸设置

Browse Source
This commit is contained in:
底层用户 2022-04-14 16:47:10 +08:00
parent dbdf84c352
commit bd4ad30524
26 changed files with 404 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/firefox.css
View File

@ -1,7 +1,3 @@
#section {
background-image: url(../img/background.jpg) !important;
}
.message,
.time,
.hitokoto,
@ -10,13 +6,13 @@
.more,
.box-wrapper,
footer {
background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.3);
}
.link-card:hover {
background: rgb(0, 0, 0, 0.6);
background: rgb(0, 0, 0, 0.4);
}
.progress {
background: rgba(0, 0, 0, 0.5) !important;
background: rgba(0, 0, 0, 0.2) !important;
}

82
css/style.css
View File

@ -1,4 +1,4 @@
@charset"utf-8";
@charset "utf-8";
/*全局样式*/
html,
@ -38,12 +38,11 @@ a:hover {
transition: 0.5s;
}
#section {
/*background-image: url(https://api.ixiaowai.cn/gqapi/gqapi.php), url(../img/background.jpg);*/
background-image: url(https://api.dujin.org/bing/1920.php), url(../img/background.jpg);
/* #section {
background-image: url(https://api.dujin.org/bing/1920.php), url(../img/background1.webp);
background-repeat: no-repeat;
background-position: center center;
}
} */
.noscript {
z-index: 999999;
@ -52,6 +51,45 @@ a:hover {
margin: 14px 0px;
}
/*背景*/
.bg-all {
z-index: 0;
position: absolute;
top: calc(0px + 0px);
left: 0;
width: 100%;
height: calc(100% - 0px);
transition: .25s;
}
#bg {
transform: scale(1.10);
filter: blur(10px);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 1s, transform .25s, filter .25s;
backface-visibility: hidden;
}
img.error {
display: none;
}
.cover {
opacity: 0;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .5) 100%), radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, .3) 166%);
transition: .25s;
}
/*页面样式*/
section {
display: block;
@ -662,10 +700,6 @@ i.iconfont.icon-github1 {
padding: 0rem 1.5rem;
}
.set-text {
text-align: center;
}
.btn-group,
.btn-group-vertical {
margin-top: 10px;
@ -694,6 +728,36 @@ i.iconfont.icon-github1 {
border-color: #eeeeee !important;
}
#wallpaper {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.form-radio {
flex: 1 1 0%;
width: 31.3%;
min-width: 31.3%;
max-width: 31.3%;
text-align: center;
margin: 1%;
}
input[type="radio"]+label {
padding: 6px 10px;
background: #ffffff26;
border-radius: 8px;
transition: 0.3s;
border: 2px solid transparent;
width: 100%;
}
input[type="radio"]:checked+label {
background: #ffffff06;
border: 2px solid #eeeeee;
}
/*更新日志*/
.upnote {
display: flex;

BIN
img/background.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 276 KiB

BIN
img/background1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
img/background10.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
img/background2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
img/background3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
img/background4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
img/background5.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
img/background6.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
img/background7.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
img/background8.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 KiB

BIN
img/background9.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

0
img/apple-touch-icon.png → img/icon/apple-touch-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

0
img/candle.png → img/icon/candle.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

0
img/favicon.ico → img/icon/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 264 KiB

After

Width:  |  Height:  |  Size: 264 KiB

0
img/logo.png → img/icon/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

0
img/music.png → img/icon/music.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

0
img/pause.png → img/icon/pause.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

0
img/play.png → img/icon/play.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

0
img/warn.png → img/icon/warn.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

63
index.html
View File

@ -25,7 +25,7 @@
<link rel="stylesheet" type="text/css" href="./css/animation.css">
<link rel="stylesheet" type="text/css" href="./css/cursor.css">
<link rel="icon" href="./favicon.ico">
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
<link rel="apple-touch-icon" href="./img/icon/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"
@ -60,8 +60,13 @@
</div>
</div>
</div>
<!--加载动画结束-->
<section id="section" class="section">
<!-- 背景图片 -->
<div class="bg-all">
<img id="bg" onerror="this.classList.add('error');"></img>
<div class="cover"></div>
</div>
<!--主体内容-->
<main id="main" class="main">
<div class="container" id="container">
<div class="row" id="row">
@ -70,7 +75,7 @@
<div class="main-left">
<!--Logo-->
<div class="main-img">
<img src="./img/logo.png" alt="img">
<img src="./img/icon/logo.png" alt="img">
<div class="img-title">
<span class="img-title">imsyy</span>
<span class="img-text">.top</span>
@ -170,9 +175,9 @@
<span id="city_text">天气</span>&nbsp;
<span id="wea_text">加载失败</span>&nbsp;
<span id="tem_night"></span>°C~
<span id="tem_day"></span>°C&nbsp;
<span id="win_text"></span>
<span id="win_speed"></span>
<span id="tem_day"></span>°C
<!-- <span id="win_text"></span>
<span id="win_speed"></span> -->
</div>
</div>
</div>
@ -359,27 +364,34 @@
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
个性设置 - 尚未实现
壁纸设置
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
aria-labelledby="headingOne" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="set">
<div class="set-text">壁纸个性化</div>
<div class="btn-group" role="group"
aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1"
autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">默认壁纸</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2"
autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">每日一图</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3"
autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">随机动漫</label>
<div class="wallpaper" id="wallpaper">
<div class="form-radio">
<input type="radio" class="set-wallpaper" style="display: none;"
id="radio1" value="1" name="wallpaper-type">
<label for="radio1">默认壁纸</label>
</div>
<div class="form-radio">
<input type="radio" class="set-wallpaper" style="display: none;"
id="radio2" value="2" name="wallpaper-type">
<label for="radio2">每日一图</label>
</div>
<div class="form-radio">
<input type="radio" class="set-wallpaper" style="display: none;"
id="radio3" value="3" name="wallpaper-type">
<label for="radio3">随机风景</label>
</div>
<div class="form-radio">
<input type="radio" class="set-wallpaper" style="display: none;"
id="radio4" value="4" name="wallpaper-type">
<label for="radio4">随机动漫</label>
</div>
</div>
</div>
</div>
@ -399,17 +411,16 @@
<div class="accordion-body">
<div class="upnote">
<span class="uptext"><i
class="iconfont icon-plus"></i>&nbsp;音乐播放器支持音量控制</span>
class="iconfont icon-plus"></i>&nbsp;壁纸个性化设置</span>
<span class="uptext"><i
class="iconfont icon-plus"></i>&nbsp;新增动态跟随鼠标样式</span>
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;图标改为
Iconfont</span>
<span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;优化部分动画及细节</span>
<span class="uptext"><i class="iconfont icon-undo"></i>&nbsp;<a
href="./old/" style="color:#efefef">点击此处返回旧版站点</a></span>
</div>
@ -446,6 +457,8 @@
<!-- JS -->
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./js/time.js"></script>
<script type="text/javascript" src="./js/js.cookie.js"></script>
<script type="text/javascript" src="./js/set.js"></script>
<script type="text/javascript" src="./js/cursor.js"></script>
<script type="text/javascript"
src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.0/js/bootstrap.min.js">

164
js/js.cookie.js Normal file
View File

@ -0,0 +1,164 @@
/*!
* JavaScript Cookie v2.2.1
* https://github.com/js-cookie/js-cookie
*
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
* Released under the MIT license
*/
;
(function (factory) {
var registeredInModuleLoader;
if (typeof define === 'function' && define.amd) {
define(factory);
registeredInModuleLoader = true;
}
if (typeof exports === 'object') {
module.exports = factory();
registeredInModuleLoader = true;
}
if (!registeredInModuleLoader) {
var OldCookies = window.Cookies;
var api = window.Cookies = factory();
api.noConflict = function () {
window.Cookies = OldCookies;
return api;
};
}
}(function () {
function extend() {
var i = 0;
var result = {};
for (; i < arguments.length; i++) {
var attributes = arguments[i];
for (var key in attributes) {
result[key] = attributes[key];
}
}
return result;
}
function decode(s) {
return s.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
}
function init(converter) {
function api() {}
function set(key, value, attributes) {
if (typeof document === 'undefined') {
return;
}
attributes = extend({
path: '/'
}, api.defaults, attributes);
if (typeof attributes.expires === 'number') {
attributes.expires = new Date(new Date() * 1 + attributes.expires * 864e+5);
}
// We're using "expires" because "max-age" is not supported by IE
attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
try {
var result = JSON.stringify(value);
if (/^[\{\[]/.test(result)) {
value = result;
}
} catch (e) {}
value = converter.write ?
converter.write(value, key) :
encodeURIComponent(String(value))
.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
key = encodeURIComponent(String(key))
.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
.replace(/[\(\)]/g, escape);
var stringifiedAttributes = '';
for (var attributeName in attributes) {
if (!attributes[attributeName]) {
continue;
}
stringifiedAttributes += '; ' + attributeName;
if (attributes[attributeName] === true) {
continue;
}
// Considers RFC 6265 section 5.2:
// ...
// 3. If the remaining unparsed-attributes contains a %x3B (";")
// character:
// Consume the characters of the unparsed-attributes up to,
// not including, the first %x3B (";") character.
// ...
stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
}
return (document.cookie = key + '=' + value + stringifiedAttributes);
}
function get(key, json) {
if (typeof document === 'undefined') {
return;
}
var jar = {};
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all.
var cookies = document.cookie ? document.cookie.split('; ') : [];
var i = 0;
for (; i < cookies.length; i++) {
var parts = cookies[i].split('=');
var cookie = parts.slice(1).join('=');
if (!json && cookie.charAt(0) === '"') {
cookie = cookie.slice(1, -1);
}
try {
var name = decode(parts[0]);
cookie = (converter.read || converter)(cookie, name) ||
decode(cookie);
if (json) {
try {
cookie = JSON.parse(cookie);
} catch (e) {}
}
jar[name] = cookie;
if (key === name) {
break;
}
} catch (e) {}
}
return key ? jar[key] : jar;
}
api.set = set;
api.get = function (key) {
return get(key, false /* read as raw */ );
};
api.getJSON = function (key) {
return get(key, true /* read as json */ );
};
api.remove = function (key, attributes) {
set(key, '', extend(attributes, {
expires: -1
}));
};
api.defaults = {};
api.withConverter = init;
return api;
}
return init(function () {});
}));

18
js/main.js
View File

@ -20,6 +20,8 @@ window.addEventListener('load', function () {
//载入动画
$('#loading-box').attr('class', 'loaded');
$('#bg').css("cssText", "transform: scale(1);filter: blur(0px);transition: ease 1.5s;");
$('.cover').css("cssText", "opacity: 1;transition: ease 1.5s;");
$('#section').css("cssText", "transform: scale(1) !important;opacity: 1 !important;filter: blur(0px) !important");
//用户欢迎
@ -73,7 +75,7 @@ if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
window.addEventListener('load', function () {
iziToast.show({
timeout: 8000,
iconUrl: './img/warn.png',
iconUrl: './img/icon/warn.png',
message: '您正在使用火狐浏览器，部分功能可能不支持'
});
}, false)
@ -98,8 +100,8 @@ fetch('https://www.yiketianqi.com/free/day?appid=43986679&appsecret=TksqGZT7&une
$('#city_text').html(data.city)
$('#tem_night').html(data.tem_night)
$('#tem_day').html(data.tem_day)
$('#win_text').html(data.win)
$('#win_speed').html(data.win_speed)
// $('#win_text').html(data.win)
// $('#win_speed').html(data.win_speed)
})
.catch(console.error)
@ -271,7 +273,7 @@ $("#more").hover(function () {
document.oncontextmenu = function () {
iziToast.show({
timeout: 2000,
iconUrl: './img/warn.png',
iconUrl: './img/icon/warn.png',
message: '为了浏览体验，本站禁用右键'
});
return false;
@ -293,7 +295,7 @@ for (var day of days) {
window.addEventListener('load', function () {
iziToast.show({
timeout: 14000,
iconUrl: './img/candle.png',
iconUrl: './img/icon/candle.png',
message: '今天是中国国家纪念日'
});
}, false);
@ -327,11 +329,11 @@ var content = `
更新日期：2022-04-12
更新说明：
1. 新增 音乐播放器支持音量控制
2. 修复 CDN 加载缓慢
1. 新增 壁纸个性化设置
2. 新增 音乐播放器支持音量控制
3. 优化 部分动画及细节
4. 优化 页面加载缓慢
5. 优化 音乐列表延迟加载
5. 优化 音乐延迟加载
主页: https://www.imsyy.top
Github: https://github.com/imsyy/home

2
js/music.js
View File

@ -420,7 +420,7 @@ ap.on('play', function () {
music = $(".aplayer-title").text() + $(".aplayer-author").text();
iziToast.info({
timeout: 8000,
iconUrl: './img/music.png',
iconUrl: './img/icon/music.png',
displayMode: 'replace',
message: music
});

115
js/set.js Normal file
View File

@ -0,0 +1,115 @@
// 背景图片 Cookies
function setBgImg(bg_img) {
if (bg_img) {
Cookies.set('bg_img', bg_img, {
expires: 36500
});
return true;
}
return false;
}
// 获取背景图片 Cookies
function getBgImg() {
var bg_img_local = Cookies.get('bg_img');
if (bg_img_local && bg_img_local !== "{}") {
return JSON.parse(bg_img_local);
} else {
setBgImg(bg_img_preinstall);
return bg_img_preinstall;
}
}
var bg_img_preinstall = {
"type": "1", // 1:默认背景 2:每日一图 3:随机风景 4:随机动漫
"path": "", //自定义图片
};
// 更改背景图片
function setBgImgInit() {
var bg_img = getBgImg();
$("input[name='wallpaper-type'][value=" + bg_img["type"] + "]").click();
switch (bg_img["type"]) {
case "1":
var pictures = new Array();
pictures[0] = './img/background1.webp';
pictures[1] = './img/background2.webp';
pictures[2] = './img/background3.webp';
pictures[3] = './img/background4.webp';
pictures[4] = './img/background5.webp';
pictures[5] = './img/background6.webp';
pictures[6] = './img/background7.webp';
pictures[7] = './img/background8.webp';
pictures[8] = './img/background9.webp';
pictures[9] = './img/background10.webp';
var rd = Math.floor(Math.random() * 10);
$('#bg').attr('src', pictures[rd]) //随机默认壁纸
break;
case "2":
$('#bg').attr('src', 'https://api.dujin.org/bing/1920.php'); //必应每日
break;
case "3":
$('#bg').attr('src', 'https://api.ixiaowai.cn/gqapi/gqapi.php'); //随机风景
break;
case "4":
$('#bg').attr('src', 'https://api.ixiaowai.cn/api/api.php'); //随机动漫
break;
}
}
$(document).ready(function () {
// 壁纸数据加载
setBgImgInit();
// 设置背景图片
$("#wallpaper").on("click", ".set-wallpaper", function () {
var type = $(this).val();
var bg_img = getBgImg();
bg_img["type"] = type;
if (type === "1") {
setBgImg(bg_img);
var pictures = new Array();
pictures[0] = './img/background1.webp';
pictures[1] = './img/background2.webp';
pictures[2] = './img/background3.webp';
pictures[3] = './img/background4.webp';
pictures[4] = './img/background5.webp';
pictures[5] = './img/background6.webp';
pictures[6] = './img/background7.webp';
pictures[7] = './img/background8.webp';
pictures[8] = './img/background9.webp';
pictures[9] = './img/background10.webp';
var rd = Math.floor(Math.random() * 10);
$('#bg').attr('src', pictures[rd]) //随机默认壁纸
iziToast.show({
message: '壁纸设置成功',
});
}
if (type === "2") {
setBgImg(bg_img);
$('#bg').attr('src', 'https://api.dujin.org/bing/1920.php'); //必应每日
iziToast.show({
message: '壁纸设置成功',
});
}
if (type === "3") {
setBgImg(bg_img);
$('#bg').attr('src', 'https://api.ixiaowai.cn/gqapi/gqapi.php'); //随机风景
iziToast.show({
message: '壁纸设置成功',
});
}
if (type === "4") {
setBgImg(bg_img);
$('#bg').attr('src', 'https://api.ixiaowai.cn/api/api.php'); //随机动漫
iziToast.show({
message: '壁纸设置成功',
});
}
});
});