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限制用户只能输汉字中文的方法
Nov 20 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
js抽奖转盘实现方法分析
May 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模板函数 正则实现代码
2012/10/15 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
举例区分Python中的浅复制与深复制
2015/07/02 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
openCV提取图像中的矩形区域
2020/07/21 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
营业员个人总结的自我评价
2013/10/25 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
诚信承诺书
2015/01/19 职场文书
博士给导师的自荐信
2015/03/06 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书