原创

博客园随机切换背景图,超简单教程

目录

一、前言

二、准备工作

三、实现代码

四、结尾


一、前言

博客园做的还是挺强大的,很多东西都支持自定义,比较适合喜欢瞎捣鼓的小伙伴。之前写过一篇博客园看板娘的教程,有兴趣的小伙伴可以看一下:https://blog.csdn.net/Wjhsmart/article/details/107083930。今天给大家分享一下怎么样自动更换背景图片,实现原理很简单,利用JS的定时任务随机更换准备好的一些图库即可。

二、准备工作

要更新背景图片当然得先准备好一些图库来了,博客园支持自定义上传一些喜欢的背景图片,大家可以先把自己喜欢的背景图都先上传到博客园中。找到设置-相册,新建一个相册,然后上传图片。

三、实现代码

图片上传完了之后将以下代码追加到博客园的自定义JS当中。记得把图片路径换成自己的路径哦。

<script type="text/javascript">
var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径
bodyBgs[0] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516065.jpg";
bodyBgs[1] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516333.jpg";
bodyBgs[2] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516461.jpg";
bodyBgs[3] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_20073005302120.jpg";
bodyBgs[4] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_20073005393260.jpg";
bodyBgs[5] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300530559.jpg";
bodyBgs[6] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_20073005310729.jpg";
bodyBgs[7] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_20073005312666.jpg";
bodyBgs[8] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_200730055501158.jpg";

var int=self.setInterval("clock()",10000);
function clock()
{
var randomBgIndex = Math.round( Math.random() * 8 );
document.body.style.background = "url("+bodyBgs[randomBgIndex]+") fixed";
}

</script>

最后别忘记了点最下面的保存哦

如果想设置默认图片,只需要把下面代码追加到CSS的后面。

#home {
opacity: 0.70;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
color: #000;
background: url(https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516461.jpg
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}

opacity:是设置透明度的

background:url中的地址换成自己的地址即可

四、结尾

怎么样?是不是超级简单,小伙伴们有没有学会呢?听说好看的小哥哥,小姐姐看完文章都会给博主点个小小的赞哦,你点赞了吗^_^

想看更多博主的精彩好文,请移步:http://wjhsmart.vip。有自己建站的小伙伴还可以联系博主互联哦。

正文到此结束
本文目录