js设置随机切换背景图片的简单实例
实例如下:
<script> var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default.png", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_3.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_1.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_4.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_5.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_6.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default-2.jpg", ]; var index=Math.floor(Math.random()*8); var img = imgs[index]; function time(){ document.body.style.backgroundImage="url("+img+")"; } document.body.onload = function(){ time(); } </script>
以上这篇js设置随机切换背景图片的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
js鼠标点击图片实现随机变换图片的方法
本文实例讲述了js鼠标点击图片实现随机变换图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>鼠标点击图片即可随机变换图片</title> <body bgcolor="#fef4d9" OnLoad="swapPic()"> <center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var ra
-
js实现网页随机切换背景图片的方法
本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = []; //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB
-
使用js操作css实现js改变背景图片示例
1.用JS定义一个图片数组,里面存放你想要随机展示的图片 复制代码 代码如下: ar imgArr=["http://www.jb51.net/logo_cn.png","http://www.jb51.net/baidu_sylogo1.gif","http://www.jb51.net/news/uploadImg/20120111/20120111081906_79.jpg", "http://www.jb51.net/news/
-
纯js实现背景图片切换效果代码
html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切
-
js实现点击图片改变页面背景图的方法
本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0"> <script language=&qu
-
js设置随机切换背景图片的简单实例
实例如下: <script> var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default.png", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/
-
js实现点击切换checkbox背景图片的简单实例
在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景为蓝色表示勾选状态 . HTML源码如下: <div class="check"> <input id="checkbox1" class="checkbox" type="checkbox" checked =
-
jquery动态切换背景图片的简单实现方法
本文实例讲述了jquery动态切换背景图片的简单实现方法.分享给大家供大家参考,具体如下: (function() { var bgCounter = 0, backgrounds = [ "Images/BACKGROUND_1_TEST.png", "Images/BACKGROUND_2_TEST.png", "Images/BACKGROUND_3_TEST.png" ]; function changeBackground() { bg
-
JS设置随机出现2个数字的实例代码
1和2 随机出现 <script type="text/javascript"> $(function(){ if (Math.random()>0.5) { console.log("1"); }else{ console.log("2"); } }); </script> PS:JS产生随机数的几个用法 <script> function GetRandomNum(Min,Max) { var Ran
-
js实现按钮加背景图片常用方法
本文实例讲述了js实现按钮加背景图片常用方法.分享给大家供大家参考.具体实现方法如下: 方法一: 复制代码 代码如下: <input type="submit" onMouseOver="style=background:url('imgs/jb51.gif')"/> 方法二: 复制代码 代码如下: <input type="button" value="提交" style="background:
-
JS控制按钮自动切换背景颜色(可暂停)
JS控制按钮自动切换背景颜色,可暂停_我们 .grigg{ position:relative; font-family:Verdana; font-size:16px;color:#ffffff; } y=" "; function colourWrite(){ y=document.bgColor; if (document.layers) {x=document.FM.box.value} if (document.all) {x=document.all.kurt.innerH
-
JS实现让网页背景图片斜向移动的方法
本文实例讲述了JS实现让网页背景图片斜向移动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现让网页背景图片斜向移动</title> <body background="images/changshi.ico"> <script language="Javascript"> <!-- function selectAl
-
javascript随机显示背景图片的方法
本文实例讲述了javascript随机显示背景图片的方法.分享给大家供大家参考.具体如下: 将以下代码加入HTML的<head></head>之间: <script LANGUAGE="JavaScript"> bg = new Array(2); //设定图片数量,如果图片数为3,这个参数就设为2,依次类推 bg[0] = 'bg1.gif' //显示的图片路径,可用http:// bg[1] = 'bg2.gif' bg[2] = 'bg3.gi
-
js根据鼠标移动速度背景图片自动旋转的方法
本文实例讲述了js根据鼠标移动速度背景图片自动旋转的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh
随机推荐
- fckeditor 常用函数
- 淘宝网提供的国内RubyGems镜像简介和使用方法
- 如何获知PHP程序占用多少内存(memory_get_usage)
- 总结PHP中DateTime的常用方法
- php中JSON的使用与转换
- PHP中trait使用方法详细介绍
- Python调用命令行进度条的方法
- JS数组(Array)处理函数整理
- MSSQL SERVER 2005 数学函数整理
- jQuery找出网页上最高元素的方法
- ospf的注意事项
- Win2003服务器系统文件权限设置小结
- C#中Serializable序列化实例详解
- php一些公用函数的集合
- LInux下安装MySQL5.6 X64版本步骤详解
- Spring Boot集成MyBatis的方法
- vue根据值给予不同class的实例
- 易语言设置在画板中写出文字的字体
- JavaScript基础之this和箭头函数详析
- Java使用嵌套循环模拟ATM机取款业务操作示例