新增 壁纸设置

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

View File

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

View File

@ -1,4 +1,4 @@
@charset"utf-8"; @charset "utf-8";
/*全局样式*/ /*全局样式*/
html, html,
@ -38,12 +38,11 @@ a:hover {
transition: 0.5s; transition: 0.5s;
} }
#section { /* #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/background1.webp);
background-image: url(https://api.dujin.org/bing/1920.php), url(../img/background.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
} } */
.noscript { .noscript {
z-index: 999999; z-index: 999999;
@ -52,6 +51,45 @@ a:hover {
margin: 14px 0px; 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 { section {
display: block; display: block;
@ -662,10 +700,6 @@ i.iconfont.icon-github1 {
padding: 0rem 1.5rem; padding: 0rem 1.5rem;
} }
.set-text {
text-align: center;
}
.btn-group, .btn-group,
.btn-group-vertical { .btn-group-vertical {
margin-top: 10px; margin-top: 10px;
@ -694,6 +728,36 @@ i.iconfont.icon-github1 {
border-color: #eeeeee !important; 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 { .upnote {
display: flex; display: flex;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 276 KiB

BIN
img/background1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

BIN
img/background10.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

BIN
img/background2.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

BIN
img/background3.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

BIN
img/background4.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 227 KiB

BIN
img/background5.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 KiB

BIN
img/background6.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
img/background7.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
img/background8.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

BIN
img/background9.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

View File

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

View File

Before

Width:  |  Height:  |  Size: 264 KiB

After

Width:  |  Height:  |  Size: 264 KiB

View File

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

@ -25,7 +25,7 @@
<link rel="stylesheet" type="text/css" href="./css/animation.css"> <link rel="stylesheet" type="text/css" href="./css/animation.css">
<link rel="stylesheet" type="text/css" href="./css/cursor.css"> <link rel="stylesheet" type="text/css" href="./css/cursor.css">
<link rel="icon" href="./favicon.ico"> <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 --> <!-- 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" <script type="text/javascript"
@ -60,8 +60,13 @@
</div> </div>
</div> </div>
</div> </div>
<!--加载动画结束-->
<section id="section" class="section"> <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"> <main id="main" class="main">
<div class="container" id="container"> <div class="container" id="container">
<div class="row" id="row"> <div class="row" id="row">
@ -70,7 +75,7 @@
<div class="main-left"> <div class="main-left">
<!--Logo--> <!--Logo-->
<div class="main-img"> <div class="main-img">
<img src="./img/logo.png" alt="img"> <img src="./img/icon/logo.png" alt="img">
<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>
@ -170,9 +175,9 @@
<span id="city_text">天气</span>&nbsp; <span id="city_text">天气</span>&nbsp;
<span id="wea_text">加载失败</span>&nbsp; <span id="wea_text">加载失败</span>&nbsp;
<span id="tem_night"></span>°C~ <span id="tem_night"></span>°C~
<span id="tem_day"></span>°C&nbsp; <span id="tem_day"></span>°C
<span id="win_text"></span> <!-- <span id="win_text"></span>
<span id="win_speed"></span> <span id="win_speed"></span> -->
</div> </div>
</div> </div>
</div> </div>
@ -359,27 +364,34 @@
<button class="accordion-button" type="button" data-bs-toggle="collapse" <button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" data-bs-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne"> aria-controls="collapseOne">
个性设置 - 尚未实现 壁纸设置
</button> </button>
</h2> </h2>
<div id="collapseOne" class="accordion-collapse collapse show" <div id="collapseOne" class="accordion-collapse collapse show"
aria-labelledby="headingOne" data-bs-parent="#accordion"> aria-labelledby="headingOne" data-bs-parent="#accordion">
<div class="accordion-body"> <div class="accordion-body">
<div class="set"> <div class="set">
<div class="set-text">壁纸个性化</div> <div class="wallpaper" id="wallpaper">
<div class="btn-group" role="group" <div class="form-radio">
aria-label="Basic radio toggle button group"> <input type="radio" class="set-wallpaper" style="display: none;"
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" id="radio1" value="1" name="wallpaper-type">
autocomplete="off" checked> <label for="radio1">默认壁纸</label>
<label class="btn btn-outline-primary" for="btnradio1">默认壁纸</label> </div>
<div class="form-radio">
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" <input type="radio" class="set-wallpaper" style="display: none;"
autocomplete="off"> id="radio2" value="2" name="wallpaper-type">
<label class="btn btn-outline-primary" for="btnradio2">每日一图</label> <label for="radio2">每日一图</label>
</div>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" <div class="form-radio">
autocomplete="off"> <input type="radio" class="set-wallpaper" style="display: none;"
<label class="btn btn-outline-primary" for="btnradio3">随机动漫</label> 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> </div>
</div> </div>
@ -399,17 +411,16 @@
<div class="accordion-body"> <div class="accordion-body">
<div class="upnote"> <div class="upnote">
<span class="uptext"><i <span class="uptext"><i
class="iconfont icon-plus"></i>&nbsp;音乐播放器支持音量控制</span> class="iconfont icon-plus"></i>&nbsp;壁纸个性化设置</span>
<span class="uptext"><i <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;修复 <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;修复
CDN 加载缓慢</span> CDN 加载缓慢</span>
<span class="uptext"><i <span class="uptext"><i
class="iconfont icon-wrench-fill"></i>&nbsp;时光胶囊显示错误</span> class="iconfont icon-wrench-fill"></i>&nbsp;时光胶囊显示错误</span>
<span class="uptext"><i <span class="uptext"><i
class="iconfont icon-wrench-fill"></i>&nbsp;移动端动画及细节</span> class="iconfont icon-wrench-fill"></i>&nbsp;移动端动画及细节</span>
<span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;图标改为 <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;优化部分动画及细节</span>
Iconfont</span>
<span class="uptext"><i class="iconfont icon-undo"></i>&nbsp;<a <span class="uptext"><i class="iconfont icon-undo"></i>&nbsp;<a
href="./old/" style="color:#efefef">点击此处返回旧版站点</a></span> href="./old/" style="color:#efefef">点击此处返回旧版站点</a></span>
</div> </div>
@ -446,6 +457,8 @@
<!-- JS --> <!-- JS -->
<script type="text/javascript" src="./js/main.js"></script> <script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./js/time.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="./js/cursor.js"></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">

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 () {});
}));

View File

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

View File

@ -420,7 +420,7 @@ ap.on('play', function () {
music = $(".aplayer-title").text() + $(".aplayer-author").text(); music = $(".aplayer-title").text() + $(".aplayer-author").text();
iziToast.info({ iziToast.info({
timeout: 8000, timeout: 8000,
iconUrl: './img/music.png', iconUrl: './img/icon/music.png',
displayMode: 'replace', displayMode: 'replace',
message: music 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: '壁纸设置成功',
});
}
});
});