
在皮肤『QQ Style』中我使用了随机背景切换功能,这个随机背景切换是一个独立的功能,上面使用的只是其中一小部分应用。下面我将演示背景随机切换的更多应用,然后大家就可以有更多的拓展。
第一:背景图片重复铺满屏幕并随着文字一起运动
html head metatext/html;utf-8Content-Type / title 背景图片随机切换(1) /title /head body scriptJavaScriptnew 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'varMath.floor(Math.random() * bg.length);document.body.background = bg[index]; /script a/blog/background-image-randomly-switching.html 背景图片随机切换 /a br / 刷新一次换一个背景,由于可能受到网速原因,建议保存本地测试!第二:背景图片重复铺满屏幕但不随着文字一起运动
html head metatext/html;utf-8Content-Type / title 背景图片随机切换(2) /title /head body scriptJavaScriptnew 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'varMath.floor(Math.random() * bg.length);document.body.background = bg[index];document.body.style.backgroundAttachment = fixed /script a/blog/background-image-randomly-switching.html 背景图片随机切换 /a br / 刷新一次换一个背景,由于可能受到网速原因,建议保存本地测试!第三:背景图片不重复并位于浏览器左边(局右可以自己推导)
方法一(图片随着文字一起运动)
html head metatext/html;utf-8Content-Type / title 背景图片随机切换(3.1) /title /head body scriptJavaScriptnew 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'varMath.floor(Math.random() * bg.length);document.body.style.background = url( +bg[index]+ ) no-repeat top left /script a/blog/background-image-randomly-switching.html 背景图片随机切换 /a br / 刷新一次换一个背景,由于可能受到网速原因,建议保存本地测试!方法二(图片不随着文字一起运动)
html head metatext/html;utf-8Content-Type / title 背景图片随机切换(3.2) /title /head body scriptJavaScriptnew 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'varMath.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/blog/background-image-randomly-switching.html 背景图片随机切换 /a br / 刷新一次换一个背景,由于可能受到网速原因,建议保存本地测试!第四:背景图片不重复并位在浏览器居中顶部显示
html head metatext/html;utf-8Content-Type / title 背景图片随机切换(4) /title /head body scriptJavaScriptnew 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'varMath.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/blog/background-image-randomly-switching.html 背景图片随机切换 /a br / 刷新一次换一个背景,由于可能受到网速原因,建议保存本地测试!当然还可以扩展,自己动手吧!