当前位置： 首页 > 设计 > 正文
avatar

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

设计6,424次阅读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="http://localhost/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="http://localhost/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="http://localhost/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="http://localhost/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="http://localhost/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 | 威言威语
赏

您可能还会对这些文章感兴趣！

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

  1. avatar
    4楼
    wlzxy Unknow Browser Unknow Os ：

    这个不错，我收藏一下。

    2010-01-09 16:47 [回复]
  2. avatar
    地板
    左岸岛 Unknow Browser Unknow Os ：

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

    2009-12-04 09:27 [回复]
  3. avatar
    板凳
    锐风 Unknow Browser Unknow Os ：

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

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

    2009-12-03 20:35 [回复]
  4. avatar
    沙发
    某曦 Unknow Browser Unknow Os ：

    不错

    2009-12-02 09:19 [回复]

发表评论

avatar

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键：Ctrl+Enter