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 相关文章推荐
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
javascript date格式化示例
Sep 25 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
10个实用的脚本代码工具
2010/05/04 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python3运算符常见用法分析
2020/02/14 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
党员党性分析材料
2014/02/17 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
出租车拒载检讨书
2015/01/28 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
使用CSS连接数据库的方式
2022/02/28 HTML / CSS