网页背景随机更换

发布于 / 网页制作 / 0 条评论

网页背景图片(自适应+固定+随机)
花了点时间找代码七凑八凑搞出来的小玩意…


(毕竟人家是业余的…………)

这个是xy都自适应(也就是说一旦浏览器窗口尺寸发生变化变化图片就会变形)

<script>
 var bodyBgs = [];
 bodyBgs[0] = "001.jpg";
 bodyBgs[1] = "002.jpg";
 bodyBgs[2] = "003.jpg";
 bodyBgs[3] = "004.jpg";
 bodyBgs[4] = "005.jpg";
 var randomBgIndex = Math.round( Math.random() * 4 );
 //输出随机的背景图
 document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0;background-attachment:fixed;background-size:100% 100%}</style>');
 //]]>                                                              定义图片位于x轴中间 、、定义图片不随滚动轴移动 、、定义图片占满屏幕x与y轴
</script>

这个是只自适应x轴,当变成手机浏览时就是y轴平铺图片

<script>
 var bodyBgs = [];
 bodyBgs[0] = "/001.jpg";
 bodyBgs[1] = "/002.jpg";
 bodyBgs[2] = "/003.jpg";
 bodyBgs[3] = "/004.jpg";
 bodyBgs[4] = "/005.jpg";
 bodyBgs[0] = "/006.jpg";
 var randomBgIndex = Math.round( Math.random() * 5 );
 //输出随机的背景图
 document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0;background-attachment:fixed;background-size:100%;background-repeat:repeat-y;}</style>');
 //定义图片位于x轴中间、 、定义图片不随滚动轴移动 、、定义图片占满屏幕x轴、、定义y轴横向平铺
</script>
顺便一提:
修改主题目录index.php   就是修改首页
                         single.php  就是修改文章页面
                         page.php    就是修改页面页面
本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
转载原创文章请注明,转载自: 沧水的博客 » 网页背景随机更换
Not Comment Found