威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

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

多种背景图片随机切换的应用,下面我将演示背景随机切换的更多应用,然后大家就可以有更多的拓展。
多种背景图片随机切换的应用

在皮肤『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] = 'https://img.weisay.com/weiimg/article/307_1.jpg'
bg[1] = 'https://img.weisay.com/weiimg/article/307_2.jpg'
bg[2] = 'https://img.weisay.com/weiimg/article/307_3.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] = 'https://img.weisay.com/weiimg/article/307_1.jpg'
bg[1] = 'https://img.weisay.com/weiimg/article/307_2.jpg'
bg[2] = 'https://img.weisay.com/weiimg/article/307_3.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] = 'https://img.weisay.com/weiimg/article/307_1.jpg'
bg[1] = 'https://img.weisay.com/weiimg/article/307_2.jpg'
bg[2] = 'https://img.weisay.com/weiimg/article/307_3.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] = 'https://img.weisay.com/weiimg/article/307_1.jpg'
bg[1] = 'https://img.weisay.com/weiimg/article/307_2.jpg'
bg[2] = 'https://img.weisay.com/weiimg/article/307_3.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] = 'https://img.weisay.com/weiimg/article/307_1.jpg'
bg[1] = 'https://img.weisay.com/weiimg/article/307_2.jpg'
bg[2] = 'https://img.weisay.com/weiimg/article/307_3.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>

当然还可以扩展,自己动手吧!

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

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

  1. wlzxy
    4楼
    wlzxy:Google Chrome 26.0.1410.64 Windows 7

    这个不错,我收藏一下。

    2010-01-09 16:47 回复
  2. 左岸岛
    地板
    左岸岛:Internet Explorer 9.0 Windows 7

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

    2009-12-04 09:27 回复
  3. 锐风
    板凳
    锐风:Firefox 11.0 Windows 7

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

    William 于 2009-12-03 10:14 PM 回复

    呵呵,这个不光是用再PJBlog皮肤上的,我们可以有更多的扩展,与PJBlog皮肤是相互分离的。

    2009-12-03 20:35 回复
  4. 某曦
    沙发
    某曦:搜狗高速浏览器 Windows 7

    不错

    2009-12-02 09:19 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

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