// ==UserScript==
// @name linux.do换肤
// @description linux.do换肤
// @match https://linux.do/*
// @require http://libs.baidu.com/jquery/2.0.0/jquery.min.js
// @resource anime1_bg https://pic2.zhimg.com/80/v2-2a73ce8af03386989598d2444e2cfdad_1440w.webp
// @resource anime2_bg https://pic1.zhimg.com/80/v2-287aea7559ac98b2c169a5b137219ad0_1440w.webp
// @resource anime3_bg https://pic3.zhimg.com/80/v2-40c93f6411f3ce490a1b17ca947bd582_1440w.webp
// @resource scenery1_bg https://z3.ax1x.com/2021/06/20/RFMMQS.jpg
// @resource scenery2_bg https://z3.ax1x.com/2021/06/20/RFMDeJ.jpg
// @resource scenery3_bg https://z3.ax1x.com/2021/06/20/RFMcJx.jpg
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_deleteValue
// @grant GM_getResourceURL
// @grant GM_getResourceText
// @version 1.0
// @author @carlin
// @icon https://www.google.com/s2/favicons?domain=linux.do
// ==/UserScript==
'use strict'
$(function () {
const skinSide =
'<div class="side" id="skin_side" style="position: fixed;width: 60px;height: 35px;top: 150px;left:0;border-radius: 0px 10px 10px 0;background: rgba(255,246,143,0.8);font-size: 20px;line-height: 30px;padding-left: 10px;font-weight: bold;color: #B22222;box-shadow: 1px 1px 5px #B22222;cursor: pointer;"><span>换肤</span></div>' //定义换肤侧边栏
const skinBoard =
'<div class="skin" style="position: fixed;display:none;border: 1px solid #cccccc;width: 300px;height: 250px;z-index: 999;top: 150px;left:-350px;background: rgba(255, 246, 143, 0.8);border-radius: 10px;box-shadow: 1px 1px 5px #b22222;">' //定义换肤主面板
const skinMain =
'<div class="skin_main" style="position: relative; width: 100%; height: auto"><span class="skin_cap" style="font-size: 20px;line-height: 28px;margin-left: 120px;color: #B22222;font-weight: bold;">换肤</span><span class="skin_close" title="关闭" style="margin-left: 115px;cursor:pointer;"><svg t="1604735816954" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3392" width="16" height="16"><path d="M583.168 523.776L958.464 148.48c18.944-18.944 18.944-50.176 0-69.12l-2.048-2.048c-18.944-18.944-50.176-18.944-69.12 0L512 453.12 136.704 77.312c-18.944-18.944-50.176-18.944-69.12 0l-2.048 2.048c-19.456 18.944-19.456 50.176 0 69.12l375.296 375.296L65.536 899.072c-18.944 18.944-18.944 50.176 0 69.12l2.048 2.048c18.944 18.944 50.176 18.944 69.12 0L512 594.944 887.296 970.24c18.944 18.944 50.176 18.944 69.12 0l2.048-2.048c18.944-18.944 18.944-50.176 0-69.12L583.168 523.776z" p-id="3393" fill="#B22222"></path></svg></span></div>' //定义换肤面板
const skinList =
'<div class="skin_list" style="width: 240px;height: 170px;margin: 10px auto;margin-top: 5px;border-radius: 10px;background: rgba(255, 246, 143, 0.8);box-shadow: 1px 1px 5px #b22222 inset;"><form name="skin_form" action=""></form><ul style="padding: 5px;margin:0;display: inline-block;float: left;list-style: none;color:#B22222;"></ul></div>' //定义换肤列表
const [skinItem1, skinItem2, skinItem3, skinItem4, skinItem5, skinItem6, skinItem7, skinItem8,
skinItem9,skinItem10
] = [
'<li style="float: left; padding: 10px 0 0 10px;"><input type="radio" name="skin" id="skin1" value="skin1" style="cursor: pointer;"/><label for="skin1" style="cursor: pointer;">纯色1</label></li>',
'<li style="float: left; padding: 10px 0 0 10px"><input type="radio" name="skin" id="skin2" value="skin2" style="cursor: pointer;"/><label for="skin2" style="cursor: pointer;">纯色2</label></li>',
'<li style="float: left; padding: 10px 0 0 10px"><input type="radio" name="skin" id="skin3" value="skin3" style="cursor: pointer;"/><label for="skin3" style="cursor: pointer;">纯色3</label></li>',
'<li style="float: left; padding: 10px 0 0 10px"><input type="radio" name="skin" id="skin4" value="skin4" style="cursor: pointer;"/><label for="skin4" style="cursor: pointer;">动漫1</label></li>',
'<li style="float: left; padding: 10px 0 0 10px"><input type="radio" name="skin" id="skin5" value="skin5" style="cursor: pointer;"/><label for="skin5" style="cursor: pointer;">动漫2</label></li>',
'<li style="float: left; padding: 10px 0 0 10px"><input type="radio" name="skin" id="skin6" value="skin6" style="cursor: pointer;"/><label for="skin6" style="cursor: pointer;">动漫3</label></li>',
'<li style="float: left; padding: 10px 0 0 10px"><input type="radio" name="skin" id="skin7" value="skin7" style="cursor: pointer;"/><label for="skin7" style="cursor: pointer;">风景1</label></li>',
'<li style="float: left; padding: 10px 0 0 10px"><input type="radio" name="skin" id="skin8" value="skin8" style="cursor: pointer;"/><label for="skin8" style="cursor: pointer;">风景2</label></li>',
'<li style="float: left; padding: 10px 0 0 10px"><input type="radio" name="skin" id="skin9" value="skin9" style="cursor: pointer;"/><label for="skin9" style="cursor: pointer;">风景3</label></li>',
'<li style="float: left; padding: 10px 0 0 70px"><input type="radio" name="skin" id="skin_none" value="skin_none" style="cursor: pointer;"/><label for="skin_none" style="cursor: pointer;">默认皮肤</label></li>'
] //定义所有皮肤选项
let skinFlag; //定义皮肤值
let skinimg1; //定义皮肤背景图片1
let skinimg2; //定义皮肤背景图片2
let skinimg3; //定义皮肤背景图片3
let skinimg4; //定义皮肤背景图片4
let skinimg5; //定义皮肤背景图片5
let skinimg6; //定义皮肤背景图片6
//所有dom插入操作，生产html结构
$('body').append(skinSide, skinBoard);
$('.skin').append(skinMain).append(skinList);
$('.skin_list ul').append(skinItem1, skinItem2, skinItem3, skinItem4, skinItem5, skinItem6,
skinItem7, skinItem8, skinItem9,skinItem10);
//获取皮肤值设置页面皮肤
let skinvalue = GM_getValue("skinflag")
switch (skinvalue) {
case 1:
$('body').css("background", "#FDF5E6");
$('#skin1').prop('checked', true);
break;
case 2:
$('body').css("background", "#F0FFFF");
$('#skin2').prop('checked', true);
break;
case 3:
$('body').css("background", "#F5F5DC");
$('#skin3').prop('checked', true);
break;
case 4:
skinimg1 = GM_getResourceURL("anime1_bg");
$('body').css("background", `url( ${skinimg1})`);
$('#skin4').prop('checked', true);
break;
case 5:
skinimg2 = GM_getResourceURL("anime2_bg");
$('body').css("background", `url( ${skinimg2})`);
$('#skin5').prop('checked', true);
break;
case 6:
skinimg3 = GM_getResourceURL("anime3_bg");
$('body').css("background", `url( ${skinimg3})`);
$('#skin6').prop('checked', true);
break;
case 7:
skinimg4 = GM_getResourceURL("scenery1_bg");
$('body').css("background", `url( ${skinimg4})`);
$('#skin7').prop('checked', true);
break;
case 8:
skinimg5 = GM_getResourceURL("scenery2_bg");
$('body').css("background", `url( ${skinimg5})`);
$('#skin8').prop('checked', true);
break;
case 9:
skinimg6 = GM_getResourceURL("scenery3_bg");
$('body').css("background", `url( ${skinimg6})`);
$('#skin9').prop('checked', true);
break;
case 10:
$('body').css("background","#f6f6f6" );
$('#skin_none').prop('checked', true);
break;
}
//侧边栏悬浮特效
$('.side').hover(function () {
$(this).css('box-shadow', '1px 1px 10px');
}, function () {
$(this).css('box-shadow', '1px 1px 5px');
})
//换肤面板打开特效
$('#skin_side').click(function () {
$('.skin').show().animate({
left: '0'
}, 'fast');
$('.side').hide();
})
//换肤面板关闭特效
$('.skin_close').click(function () {
$(this).parents('.skin').animate({
left: '-350px'
}, "fast");
$('.side').show();
})
//关于面板关闭特效
$('.about_close').click(function () {
$(this).parents('.about').animate({
left: '-350px'
}, "fast");
$('.side').show();
})
//换肤功能
$("input[type='radio']").click(function () {
let val = $('input:radio[name="skin"]:checked').val();
switch (val) {
case 'skin1':
$('body').css('background', '#FDF5E6');
skinFlag = 1;
GM_deleteValue("skinflag");
GM_setValue("skinflag", skinFlag);
break;
case 'skin2':
$('body').css('background', '#F0FFFF');
skinFlag = 2;
GM_deleteValue("skinflag");
GM_setValue("skinflag", skinFlag);
break;
case 'skin3':
$('body').css('background', '#F5F5DC');
skinFlag = 3;
GM_deleteValue("skinflag");
GM_setValue("skinflag", skinFlag);
break;
case 'skin4':
skinimg1 = GM_getResourceURL("anime1_bg");
$('body').css("background", `url( ${skinimg1})`);
skinFlag = 4;
GM_deleteValue("skinflag");
GM_setValue("skinflag", skinFlag);
break;
case 'skin5':
skinimg2 = GM_getResourceURL("anime2_bg");
$('body').css("background", `url( ${skinimg2})`);
skinFlag = 5;
GM_deleteValue("skinflag");
GM_setValue("skinflag", skinFlag);
break;
case 'skin6':
skinimg3 = GM_getResourceURL("anime3_bg");
$('body').css("background", `url( ${skinimg3})`);
skinFlag = 6;
GM_deleteValue("skinflag");
GM_setValue("skinflag", skinFlag);
break;
case 'skin7':
skinimg4 = GM_getResourceURL("scenery1_bg");
$('body').css("background", `url( ${skinimg4})`);
skinFlag = 7;
GM_deleteValue("skinflag");
GM_setValue("skinflag", skinFlag);
break;
case 'skin8':
skinimg5 = GM_getResourceURL("scenery2_bg");
$('body').css("background", `url( ${skinimg5})`);
skinFlag = 8;
GM_deleteValue("skinflag");
GM_setValue("skinflag", skinFlag);
break;
case 'skin9':
skinimg6 = GM_getResourceURL("scenery3_bg");
$('body').css("background", `url( ${skinimg6})`);
skinFlag = 9;
GM_deleteValue("skinflag");
GM_setValue("skinflag", skinFlag);
break;
case 'skin_none':
$('body').css("background","#f6f6f6" );
skinFlag = 10;
GM_deleteValue("skinflag");
GM_setValue("skinflag", skinFlag);
break;
}
});
function throttle(func, delay) {
let last;
return function () {
const _this = this;
const _args = arguments;
const now = +new Date();
if (last && now < last + delay) {
clearTimeout(func.tid);
func.tid = setTimeout(function () {
last = now;
func.call(_this, [..._args]);
}, delay);
} else {
last = now;
func.call(_this, [..._args]);
}
}
}
})();
效果：
效果不是很理想，来个大佬优化一下
