前言
之前有人对必应壁纸下手了,获取了必应壁纸的链接,将其用于博客背景上面,但是,刷新之后不能更换,这不就浪费了必应每日的六张壁纸图片吗?
前段时间有人做出了可以刷新更换的必应壁纸的JS代码,我将其经授权之后拿来使用,并且有所改动,但忘记了来源。
如果相关代码有侵权,请联系删除
$(document).ready(function () {
/**
* 获取Bing壁纸
* 原先 YQL 已经无法提供服务了
* 改用 JsonBird:https://bird.ioliu.cn/
*
*/
var url = 'https://bird.ioliu.cn/v1/?url=https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=8';
var imgUrls = JSON.parse(sessionStorage.getItem("imgUrls"));
var index = sessionStorage.getItem("index");
var $back = $('#back');
if(imgUrls == null){
imgUrls = new Array();
index = 0;
$.get(url,function (result) {
images = result.images;
for (let i = 0; i < images.length; i++) {
const item = images[i];
imgUrls.push(item.url);
}
var imgUrl = imgUrls[index];
var url = "https://www.bing.com"+imgUrl;
$back.css("background", "linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('"+url+"') center center no-repeat #666");
$back.css("background-size", "cover");
sessionStorage.setItem("imgUrls",JSON.stringify(imgUrls));
sessionStorage.setItem("index",index);
});
}else{
if(index == 7)
index = 0;
else
index++;
var imgUrl = imgUrls[index];
var url = "https://www.bing.com"+imgUrl;
$back.css("background", "linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('"+url+"') center center no-repeat #666");
$back.css("background-size", "cover");
sessionStorage.setItem("index",index);
}
})
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
使用
如何使用呢?
将该代码引入网页,在网站的<body>中插入以下代码
<div id="back" class="background-img"></div>
之后给该背景加一个CSS样式:
.background-img
{
z-index: -3; /*图层优先级*/
position: fixed; /*位置*/
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
filter: blur(1px); /*模糊度*/
}
这样就可以使用了
必应往期图片站
或许你想更多了解必应以往的壁纸图片,那么我在网上寻找以后发现这样一个网站,挺好的分享给大家:
必应每日高清壁纸 - 精彩,从这里开始
CSS插入其余背景
但是你不想使用必应壁纸,想使用别的图片作为壁纸,那怎么办?
插入以下代码:
body
{
background-image:url('此处填写链接或者相对路径');
}
你还可以增加其余的参数,比如模糊度、位置等参数