多种背景图片随机切换的应用

William2009-11-28 23:36设计8,788次阅读4条评论

扫一扫手机看

在皮肤『QQ Style』中我使用了随机背景切换功能，这个随机背景切换是一个独立的功能，上面使用的只是其中一小部分应用。下面我将演示背景随机切换的更多应用，然后大家就可以有更多的拓展。

第一：背景图片重复铺满屏幕并随着文字一起运动

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>背景图片随机切换(1)</title>
</head>
<body>
<script language="JavaScript">
bg = new Array(2);
bg[0] = '/blog/weiimg/article/change/weisaybg1.jpg'
bg[1] = '/blog/weiimg/article/change/weisaybg2.jpg'
bg[2] = '/blog/weiimg/article/change/weisaybg3.jpg'
var index = Math.floor(Math.random() * bg.length);
document.body.background = bg[index];
</script>
<a href="/blog/background-image-randomly-switching.html">背景图片随机切换</a><br />
刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
</body>
</html>

第二：背景图片重复铺满屏幕但不随着文字一起运动

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>背景图片随机切换(2)</title>
</head>
<body>
<script language="JavaScript">
bg = new Array(2);
bg[0] = '/blog/weiimg/article/change/weisaybg1.jpg'
bg[1] = '/blog/weiimg/article/change/weisaybg2.jpg'
bg[2] = '/blog/weiimg/article/change/weisaybg3.jpg'
var index = Math.floor(Math.random() * bg.length);
document.body.background = bg[index];
document.body.style.backgroundAttachment = "fixed";
</script>
<a href="/blog/background-image-randomly-switching.html">背景图片随机切换</a><br />
刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
</body>
</html>

第三：背景图片不重复并位于浏览器左边(局右可以自己推导)

方法一(图片随着文字一起运动)

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>背景图片随机切换(3.1)</title>
</head>
<body>
<script language="JavaScript">
bg = new Array(2);
bg[0] = '/blog/weiimg/article/change/weisaybg1.jpg'
bg[1] = '/blog/weiimg/article/change/weisaybg2.jpg'
bg[2] = '/blog/weiimg/article/change/weisaybg3.jpg'
var index = Math.floor(Math.random() * bg.length);
document.body.style.background = "url("+bg[index]+") no-repeat top left"
</script>
<a href="/blog/background-image-randomly-switching.html">背景图片随机切换</a><br />
刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
</body>
</html>

方法二(图片不随着文字一起运动)

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>背景图片随机切换(3.2)</title>
</head>
<body>
<script language="JavaScript">
bg = new Array(2);
bg[0] = '/blog/weiimg/article/change/weisaybg1.jpg'
bg[1] = '/blog/weiimg/article/change/weisaybg2.jpg'
bg[2] = '/blog/weiimg/article/change/weisaybg3.jpg'
var index = Math.floor(Math.random() * bg.length);
document.body.style.backgroundImage = "url("+bg[index]+")";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundAttachment = "fixed";
</script>
<a href="/blog/background-image-randomly-switching.html">背景图片随机切换</a><br />
刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
</body>
</html>

第四：背景图片不重复并位在浏览器居中顶部显示

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>背景图片随机切换(4)</title>
</head>
<body>
<script language="JavaScript">
bg = new Array(2);
bg[0] = '/blog/weiimg/article/change/weisaybg1.jpg'
bg[1] = '/blog/weiimg/article/change/weisaybg2.jpg'
bg[2] = '/blog/weiimg/article/change/weisaybg3.jpg'
var index = Math.floor(Math.random() * bg.length);
document.body.style.backgroundImage = "url("+bg[index]+")";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundAttachment = "fixed";
document.body.style.backgroundPositionX = "center";
</script>
<a href="/blog/background-image-randomly-switching.html">背景图片随机切换</a><br />
刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
</body>
</html>

当然还可以扩展，自己动手吧！

本文固定链接: https://www.weisay.com/blog/background-image-randomly-switching.html | 威言威语

赏

【上一篇】仿QQ聊天皮肤『QQ Style』
【下一篇】我的双胞胎外甥

多种背景图片随机切换的应用：目前有 4 条评论

4楼
wlzxy：

这个不错，我收藏一下。

2010-01-09 16:47 回复
地板
左岸岛：

用JS随机产生图片数组的Index ，然后在背景设置中调用Index对应的图片~

2009-12-04 09:27 回复
板凳
锐风：

背景图片的随机变化, 最好用 CSS+ASP 来实现. 这样无需改动源码. 只需要用 CSS 设定背景图片地址为特殊的 ASP 程序, 用 ASP 来选择使用的背景图片即可.

William 于 2009-12-03 10:14 PM 回复
呵呵，这个不光是用再PJBlog皮肤上的，我们可以有更多的扩展，与PJBlog皮肤是相互分离的。

2009-12-03 20:35 回复
沙发
某曦：

不错

2009-12-02 09:19 回复