利用Math.random做背景图像随机切换
来源:互联网 发布:php shell exec 阻塞 编辑:程序博客网 时间:2024/05/29 08:30
你应该见过(尤其是在一个网站的登录页面,比如:人人小站)这样的效果:每次登录的页面背景都是不同的。这说明该页面很有可能启用了背景随机切换的效果。最初见到这种效果的呈现时,觉得比较炫,后来仔细想想,这个用javascript实现起来应该很简单。
先看一下我做的演示吧:http://www.threesnow.com/code/093/
1. 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量。
2. 在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";
3. 因为上面用到了5个图像,所以在这里需要产生一个0到4的随机数。如果数组长度不一样,修改下面代码中的乘数就可以。
var randomBgIndex = Math.round( Math.random() * 4 );
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>
- 利用Math.random做背景图像随机切换
- Math.random 重复随机,不重复随机
- 利用Math.random()函数,获取4位随机的数字验证码
- 【Java】利用Math.Random()方法随机出四个字符的字符串,字符包括数字,大小写英文字母
- Random随机类&Math数学类
- 利用随机函数Rnd实现图像切换效果之二
- 使用Math.floor和Math.random取随机整数
- 使用Math.floor和Math.random取随机整数
- 《五分钟速学技巧_利用random模块实现随机切换header》
- 利用Math.random()方法实现几率
- JAVA中利用Math.random生成随机数
- Math.random()方法,获取随机的范围的值
- java ---- 数学函数Math和随机产生数值Random
- Android使用java的Math.Random获取随机色值
- Android使用java的Math.Random获取随机色值
- Android使用Math.Random获取随机的颜色值
- Math.random()随机产生【x,y)的随机数
- Java的Math.random()随机函数的使用
- 刚开始运用的pageContext样例
- Activity之间的数据共享与ActivityGroup子类返回键焦点的请求
- js实现textarea提示框验证
- android_launcher的源码详细分析 (转载 fengkehuan)
- 图解iPhone开发入门教程-label
- 利用Math.random做背景图像随机切换
- 模版方法模式(Template Method Pattern)
- MANIFEST.MF的用途
- weblogic10.3图像化的安装和配置
- C# Eval在asp.net中的用法及作用
- android开发-图片缩放,拖动功能实现。
- oracle 表解锁
- 注册和删除oracle spatial 表为sde的空间图层的方法
- php/curd
lz 的做法会令第一张与最后一张图片各自出现的概率n低于中间三张图片各自的概率m,且n=m/2,全拜四舍五入所赐。