Greasy Fork

Greasy Fork is available in English.

bilibili界面背景更改完整版

更改b站背景的懒人脚本,位置在页面左下角

当前为 2020-07-20 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         bilibili界面背景更改完整版
// @namespace    https://github.com/wuxintlh/
// @version      0.3.6.2
// @description  更改b站背景的懒人脚本,位置在页面左下角
// @author       桜wuxin
// @match        *://*.bilibili.com/*
// @QQgroup      793513923
// @grant        none
// ==/UserScript==

set();
var bcurl = '';
var host = window.location.host;
if (host != 'live.bilibili.com') {
    spandiv();
} else {
    var main = document.querySelector('.live-room-app').querySelector('.z-app-content');
    if (main != undefined) {
        var div = document.createElement('div');
        var span = document.createElement('span');
        var input = document.createElement('input');
        var button = document.createElement('button');
        main.appendChild(span);
        span.innerHTML = '点击更换背景';
        span.className = 'SakuraSpans';
        span.style.width = '100px';
        span.style.height = '22px';
        span.style.position = 'absolute';
        span.style.top = '940px';
        span.style.left = '-90px';
        span.style.backgroundColor = 'rgba(0,255,255,.5)';
        span.style.userSelect = 'none';
        span.style.zIndex = '10';
        span.style.fontSize = '15px';
        main.appendChild(div);
        div.className = 'SakuraDivd';
        div.style.backgroundColor = 'rgba(255,0,255,.5)'
        div.style.width = '400px';
        div.style.height = '60px';
        div.style.position = 'absolute';
        div.style.top = '902px'
        div.style.left = '100px';
        div.style.display = 'none';
        div.style.zIndex = '10';
        span.style.position = 'fixed';
        div.style.postion = 'fixed';
        div.appendChild(input);
        div.appendChild(button);
        input.type = 'text';
        input.placeholder = '请输入完整的背景url';
        input.style.width = '400px';
        input.className = 'SakuraInputi';
        button.innerHTML = '点击更换背景';
        button.style.position = 'absolute';
        button.style.top = '30px';
        button.style.left = '150px';
        button.className = 'SakuraButtonb';
    } else {
        spandiv();
    }
};
window.addEventListener('scroll', function() {
    var span = document.querySelector('.SakuraSpans');
    var div = document.querySelector('.SakuraDivd');
    span.style.position = 'fixed';
    div.style.position = 'fixed';
})
span = document.querySelector('.SakuraSpans');
//侧边栏弹出
span.addEventListener('mouseover', function() {
    animate(span, 0)
})
span.addEventListener('mouseout', function() {
    div = document.querySelector('.SakuraDivd');
    if (div.style.display == 'block') {
        false
    } else {
        animate(span, -90)
    }
})
//弹出框
span.addEventListener('click', function() {
    div = document.querySelector('.SakuraDivd');
    if (div.style.display == 'none' && this.style.left == '0px') {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
});
//更换背景
button = document.querySelector('.SakuraButtonb')
button.addEventListener('click', function() {
    var input = document.querySelector('.SakuraInputi');
    bcurl = input.value;
    if (bcurl == '') {
        alert('你没有输入任何内容!');
    } else {
        var div = document.querySelector('.SakuraBackground');
        div.dataUname = 'background';
        div.style.backgroundColor = 'white';
        //在本地储存bcurl
        window.localStorage.setItem('bcurl', bcurl);
        div.style.background = 'url(' + bcurl + ')';
    }
});
input = document.querySelector('.SakuraInputi');
input.addEventListener('focus', function() {
    if (input.value == '') {
        input.placeholder = '';
    }
});
input.addEventListener('blur', function() {
    if (input.value == '') {
        input.placeholder = '请输入完整的背景url';
    }
});
//打开页面时设置背景
function set() {
    'use strict';
    // Your code here...
    var body = document.querySelector('body');
    var div = document.createElement('div');
    body.appendChild(div);
    div.dataUname = 'background';
    var ifbcurl = window.localStorage.getItem('bcurl')
    if (ifbcurl != '' && ifbcurl != null) {
        div.style.background = 'url(' + window.localStorage.getItem('bcurl') + ')' //保存的背景
    } else {
        div.style.background = 'url(https://i0.hdslb.com/bfs/album/eb65ae5ee6f66b6381090f5bee4fe6cbabfd6d0d.png)' //默认背景
    }
    div.style.backfroundRepeat = 'no-repeat';
    div.style.position = 'fixed';
    div.style.backgroundPosition = 'center 0';
    div.style.backgroundSize = 'cover';
    div.style.zoom = '1';
    div.style.width = '100%';
    div.style.height = '100%';
    div.style.top = '0';
    div.style.left = '0';
    div.style.webkitBackgroundSize = 'cover';
    div.style.zIndex = '-1';
    div.className = 'SakuraBackground';
};

function spandiv() {
    var div = document.createElement('div');
    var body = document.querySelector('body');
    var span = document.createElement('span');
    var input = document.createElement('input');
    var button = document.createElement('button');
    body.appendChild(span);
    span.innerHTML = '点击更换背景';
    span.className = 'SakuraSpans';
    span.style.width = '100px';
    span.style.height = '22px';
    span.style.position = 'absolute';
    span.style.top = '940px';
    span.style.left = '-90px';
    span.style.backgroundColor = 'rgba(0,255,255,.5)';
    span.style.userSelect = 'none';
    span.style.zIndex = '10';
    span.style.fontSize = '15px';
    body.appendChild(div);
    div.className = 'SakuraDivd';
    div.style.backgroundColor = 'rgba(255,0,255,.5)'
    div.style.width = '400px';
    div.style.height = '60px';
    div.style.position = 'absolute';
    div.style.top = '902px'
    div.style.left = '100px';
    div.style.display = 'none';
    div.style.zIndex = '10';
    span.style.position = 'fixed';
    div.style.postion = 'fixed';
    div.appendChild(input);
    div.appendChild(button);
    input.type = 'text';
    input.placeholder = '请输入完整的背景url';
    input.style.width = '400px';
    input.className = 'SakuraInputi';
    button.innerHTML = '点击更换背景';
    button.style.position = 'absolute';
    button.style.top = '30px';
    button.style.left = '150px';
    button.className = 'SakuraButtonb';
};

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        //(目标位置-当前位置)/10 = 步长
        var step = (target - obj.offsetLeft) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            //回调函数写到定时器结束里面
            if (callback) {
                animate(obj, target, callback);
            }
        } else {
            obj.style.left = obj.offsetLeft + step + 'px';
        }
    }, 10)
};