使用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/uploadImg/20120111/20120111081906_76.jpg"];

上面的图片请大家换成自己的。

2、用JS产生一个随机数，当然这个随机数从0开始到imgArr.length-1结束

代码如下:

var index =parseInt(Math.random()*(imgArr.length-1));

这样我们就得到当前随机产生的图片

代码如下:

var currentImage=imgArr[index];

3、既然随机产生了一张背景图，那就用JS把这个图片作为背景图吧。

代码如下:

document.getElementById("BackgroundArea").style.backgroundImage="url("+currentImage+")";

由于这是一个demo，所以我在页面上定义了一个id为BackgroundArea的div，同时也是为这个div设置随机背景的。

代码如下:

<div id="BackgroundArea">
</div>

赞 (0)

相关推荐

  • js实现按钮加背景图片常用方法

    本文实例讲述了js实现按钮加背景图片常用方法.分享给大家供大家参考.具体实现方法如下: 方法一: 复制代码 代码如下: <input type="submit" onMouseOver="style=background:url('imgs/jb51.gif')"/> 方法二: 复制代码 代码如下: <input type="button" value="提交" style="background:

  • js点击更换背景颜色或图片的实例代码

    1,按钮样式 复制代码 代码如下: <script>org_Color=document.bgColor.substring(1.10)</script><form><input type="button" value="淡黄色背景"onClick="document.bgColor='#feffc6'"><input type="button" value="浅

  • js实现点击图片改变页面背景图的方法

    本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0"> <script language=&qu

  • js实现点击切换checkbox背景图片的简单实例

    js实现点击切换checkbox背景图片的简单实例

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景为蓝色表示勾选状态 . HTML源码如下: <div class="check"> <input id="checkbox1" class="checkbox" type="checkbox" checked =

  • 纯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实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在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操作css属性实现div层展开关闭效果的方法

    本文实例讲述了js操作css属性实现div层展开关闭效果的方法.分享给大家供大家参考.具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果.将代码分享给JS前端设计者. <title>js操作div展开关闭</title> <style> #jb51 { border: solid 1px #EEE; background:#F7F7F7; ma

  • vue动态改变背景图片demo分享

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> <style> #bag{ width: 200px; height: 50

  • JS操作CSS随机改变网页背景实现思路

    今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 复制代码 代码如下: var imgArr=["http://www.google.com.hk/intl/zh-CN/images/logo_cn.png", "http://www.baidu.com/img/baidu_sylogo1.gif", "http://www

  • JS操作字符串转数字的常见方法示例

    本文实例讲述了JS操作字符串转数字的常见方法.分享给大家供大家参考,具体如下: JS中字符串转数字共三种方法 一.转换函数 JS提供了两个转换函数 parseInt() 换成整数 parseFloat()转换成浮点数 以上两个方法只针对String类型:对其他类型返回的都是NaN(Not a Number) parseInt("123abc");// 123 parseInt("oxA");// 10 parseInt("22.0");// 22

  • js 操作css实现代码

    当我们需要的是一条规则的时候,总不能在每次dom发生变化的时候去执行这个操作,否则也太效率低下了.好在dom中css rules也是可以修改的.不过不同浏览器的对于css rules的接口描述也不同,其中ie中以类似hash table的方式,而ff以数组方式. 从可编程性上说,ie的接口描述更讨程序员喜欢,不过从逻辑上说,ff显然更为合理. 我提供了类似于ie的方式对两套代码进行简单包装,不过ie在dom的css removeRule之后并不能确定同步的把规则兑现.所以最好用规则覆盖的方式而非

  • 基于jquery实现的鼠标滑过按钮改变背景图片

    复制代码 代码如下: $(document).ready(function () { //按钮样式切换 $("#btFeedBack").hover( function () { $(this).removeClass("btFeed").addClass("btFeedhover"); }, function () { $(this).removeClass("btFeedhover").addClass("btF

  • 使用JS来动态操作css的几种方法

    使用JS来动态操作css的几种方法

    JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性.这类 API 的例子包括WebGL API.Canvas API.DOM API,还有一组不太为人所知的 CSS API. 由于JSX和无数JS框架的出现,使通过JS API与DOM交互的想法真正流行起来,但是在 CSS 中使用类似技术似乎并没有很多. 当然,存在像CSS-in-JS这类解决方案,但是最流行的解决方案还是基于转译(transpilation),无需额

  • 如何用js控制css中的float的代码

    ie里面用styleFloat 其他用cssFloat 本文向大家简单介绍一下JS操作css的float属性的特殊写法,对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. Js style float JS操作css的float属性的特殊写法 使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,ob

随机推荐