js实现网页随机切换背景图片的方法


Posted in Javascript onNovember 01, 2014

本文实例讲述了js实现网页随机切换背景图片的方法。分享给大家供大家参考。具体实现方法如下:

首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量

在script中将这些图像编为一个数组,便于调用。数组的长度当然就是图像的数量。

var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径

bodyBgs[0] = "images/01.jpg";

bodyBgs[1] = "images/02.jpg";

bodyBgs[2] = "images/03.jpg";

bodyBgs[3] = "images/04.jpg";

bodyBgs[4] = "images/05.jpg";

因为上面用到了5个图像,所以在这里需要产生一个0到4的随机数。如果数组长度不一样,修改下面代码中的乘数就可以。

var randomBgIndex = Math.round( Math.random() * 4 );

核心的程序就是这些。尽管很简单,却是一种小小的思路,若以此为基础,通过加工可以做出一些扩展功能。比如:主题切换以及其它的随机呈现等等。下面是完整的JS代码。

<script type="text/javascript">

    //<!CDATA[

        var bodyBgs = [];

        bodyBgs[0] = "images/01.jpg";

        bodyBgs[1] = "images/02.jpg";

        bodyBgs[2] = "images/03.jpg";

        bodyBgs[3] = "images/04.jpg";

        bodyBgs[4] = "images/05.jpg";

        var randomBgIndex = Math.round( Math.random() * 4 );

    //输出随机的背景图

        document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0}</style>');

    //]]>

</script>

希望本文所述对大家基于javascript的web程序设计有所帮助。

Javascript 相关文章推荐
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 #Javascript
一个检测表单数据的JavaScript实例
Oct 31 #Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 #Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 #Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 #Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 #Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 #Javascript
You might like
php简单浏览目录内容的实现代码
2013/06/07 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
PHP实现的json类实例
2015/07/28 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
Python进行特征提取的示例代码
2020/10/15 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
思想汇报范文
2013/11/04 职场文书
中学老师的自我评价
2013/11/07 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
小学敬老月活动方案
2014/02/11 职场文书
求职自荐信怎么写
2014/03/06 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL