在皮肤『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 | 威言威语
这个不错,我收藏一下。
用JS随机产生图片数组的Index ,然后在背景设置中调用Index对应的图片~
背景图片的随机变化, 最好用 CSS+ASP 来实现. 这样无需改动源码. 只需要用 CSS 设定背景图片地址为特殊的 ASP 程序, 用 ASP 来选择使用的背景图片即可.
不错