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 相关文章推荐
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 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 COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
PHP 转义使用详解
2013/07/15 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
JS 有名函数表达式全面解析
2010/03/19 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python实现抖音视频批量下载
2018/06/20 Python
Python如何发布程序的详细教程
2018/10/09 Python
Python高斯消除矩阵
2019/01/02 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
专科毕业生自我鉴定
2013/12/01 职场文书
就业自我评价
2014/02/04 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
2014年会计工作总结
2014/11/27 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
OpenCV实现常见的四种图像几何变换
2022/04/01 Python