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显示隐藏层比较不错的方法分析
Sep 30 Javascript
jQuery 使用手册(六)
Sep 23 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
js生成随机数方法和实例
Jan 17 Javascript
Vue-Router的使用方法
Sep 05 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
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
Dedecms常用函数解析
2008/02/01 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
深入理解JavaScript定时机制
2010/10/29 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
Javascript刷新页面的实例
2017/09/23 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Vue 数据响应式相关总结
2021/01/28 Vue.js
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
python删除文件示例分享
2014/01/28 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
财务经理的岗位职责
2013/12/17 职场文书
职业规划书如何设计?
2014/01/09 职场文书
学生操行评语大全
2014/04/24 职场文书
村党支部公开承诺书
2014/05/29 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
小学教育见习报告
2014/10/31 职场文书
学期个人自我总结
2015/02/13 职场文书
班主任培训研修日志
2015/11/13 职场文书
高中化学教学反思
2016/02/22 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript