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实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在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> <title>鼠标点击图片即可随机变换图片</title> <body bgcolor="#fef4d9" OnLoad="swapPic()"> <center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var ra
-
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
随机推荐
- lib.utf.js
- Android GridView简单实例
- python回溯法实现数组全排列输出实例分析
- Asp.net使用SignalR实现酷炫端对端聊天功能
- 微信小程序 登录实例详解
- .NET数组使用中的注意事项小结
- PHP版微信公众平台红包API
- PHP实现将多个文件中的内容合并为新文件的方法示例
- php的SimpleXML方法读写XML接口文件实例解析
- Android 手势 正则匹配图片实例代码
- Android开发自定义TextView省略号样式的方法
- php 中文和编码判断代码
- php强制用户转向www域名的方法
- JavaScript Memoization 让函数也有记忆功能
- 检查上传图片是否合法的函数,木马改后缀名、图片加恶意代码均逃不过
- 浅谈jquery中next与siblings的区别
- Nodejs异步回调的优雅处理方法
- Java类之间的关系图_动力节点Java学院整理
- 用jscript启动sqlserver
- jquery动感漂浮导航菜单代码分享