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 相关文章推荐
kindeditor修复会替换script内容的问题
Apr 03 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
JS前端加密算法示例
Dec 22 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
基于canvas粒子系统的构建详解
Aug 31 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
浅谈Vue 数据响应式原理
May 07 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 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性能优化 产生高度优化代码
2011/07/22 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php类自动加载器实现方法
2015/07/28 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
Python聊天室实例程序分享
2016/01/05 Python
python如何读写csv数据
2018/03/21 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
python之mock模块基本使用方法详解
2019/06/27 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
2014小学植树节活动总结
2014/03/10 职场文书
中秋手机店促销方案
2014/06/16 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
街道社区活动报告
2015/02/05 职场文书
关于分班的感言
2015/08/04 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python