利用JS实现html网页随机背景图

发布于 8 天前  100 次阅读


这个教程是不久之前我在网上找到的,当时执着于用CSS实现,可CSS毕竟是静态的,还是必须用JS来辅助,所以干脆也直接用JS来绘制背景图好了。原教程我已经找不到了,所以干脆就直接按我记下来的内容发教程咯。

两种方法:

1 一步到位:

将下列代码复制到需要使用随机背景图的html文件中。如果是WordPress的话,复制到全局footer或者header即可。

<script>
var bodyBgs = [];
         bodyBgs[0] = "001.jpg";
         bodyBgs[1] = "002.jpg";
         bodyBgs[2] = "003.jpg";
         bodyBgs[3] = "004.jpg";
         bodyBgs[4] = "005.jpg";
         bodyBgs[5] = "006.jpg";   //请将001.jpg~006.jpg替换为图片的路径或url
         var randomBgIndex = Math.round( Math.random() * 5); //请按图片的数量替换这里的数字"5"
         document.write('body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}');
</script>

这种方法的好处就是简单,但是一旦背景图库比较多的时候,修改html文件就变得很麻烦。最头疼的是,如果要在不同的页面新增图片,就得到不同的html文件中依次修改。所以我并不推荐这种方法。

2 外部JS:

新建一个js空白文件,命名为randombg.js(或者其他),把js代码填入其中

var bodyBgs = [];
bodyBgs[0] = "001.jpg";
bodyBgs[1] = "002.jpg";
bodyBgs[2] = "003.jpg";
bodyBgs[3] = "004.jpg";
bodyBgs[4] = "005.jpg";
bodyBgs[5] = "006.jpg"; //请将001.jpg~006.jpg替换为图片的路径或url
var randomBgIndex = Math.round( Math.random() * 5); //请按图片的数量替换这里的数字"5"
document.write('body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}');

在需要随机背景的网页的html文件中引入js;如果是WordPress的话,将下列代码复制到全局footer或者header即可。

<script src="js/randombg.js"></script>

当然,需要把"js/randombg.js"替换为你的服务器中这个js文件的路径或者URL。

这样做的好处是,下次修改背景的时候,只需要修改一个js文件,而不需要一个个打开html了。