编程 Javascript

使用js操作css实现js改变背景图片示例

Posted in Javascript onMarch 10, 2014

1、用JS定义一个图片数组，里面存放你想要随机展示的图片

ar imgArr=["https://3water.com/logo_cn.png",
"https://3water.com/baidu_sylogo1.gif",
"https://3water.com/news/uploadImg/20120111/20120111081906_79.jpg",
 "https://3water.com/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>

使用js操作css实现js改变背景图片示例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

简单的JS多重继承示例

Mar 13 Javascript

jquery 1.3.2 IE8中的一点点的小问题解决方法

Jul 10 Javascript

JavaScript编程开发中的五个实用小技巧

Jul 22 Javascript

如何将网页表格内容导入excel

Feb 18 Javascript

浅谈jQuery中height与width

Jul 06 Javascript

PHP结合jQuery实现红蓝投票功能特效

Jul 22 Javascript

JS打字效果的动态菜单代码分享

Aug 21 Javascript

原生js实现移动端瀑布流式代码示例

Dec 18 Javascript

详解JavaScript中localStorage使用要点

Jan 13 Javascript

Javascript如何判断数据类型和数组类型

Jun 22 Javascript

JavaScript生成随机验证码代码实例

Sep 28 Javascript

Vertx基于EventBus发送接受自定义对象

Nov 16 Javascript

红米手机抢购的js代码

Mar 10 #Javascript

按下回车键指向下一个位置的一个函数代码

Mar 10 #Javascript

用js判断输入是否为中文的函数

Mar 10 #Javascript

用IE重起计算机或者关机的示例代码

Mar 10 #Javascript

屏蔽相应键盘按钮操作

Mar 10 #Javascript

JavaScript对IE操作的经典代码(推荐)

Mar 10 #Javascript

JS中类或对象的定义说明

Mar 10 #Javascript

You might like

Thinkphp模板中使用自定义函数的方法

2012/09/23 PHP

PHP实现通过正则表达式替换回调的内容标签

2015/06/15 PHP

PHP实现仿Google分页效果的分页函数

2015/07/29 PHP

javascript attachEvent和addEventListener使用方法

2009/03/19 Javascript

js checkbox(复选框) 使用集锦

2009/04/28 Javascript

JQuery的$命名冲突详细解析

2013/12/28 Javascript

js中opener与parent的区别详细解析

2014/01/14 Javascript

简介JavaScript中toUpperCase()方法的使用

2015/06/06 Javascript

JS根据key值获取URL中的参数值及把URL的参数转换成json对象

2015/08/26 Javascript

JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码

2015/09/15 Javascript

win7下安装配置node.js+express开发环境

2015/12/06 Javascript

EasyUI布局高度自适应

2016/06/04 Javascript

angular2倒计时组件使用详解

2017/01/12 Javascript

Angularjs 1.3 中的$parse实例代码

2017/09/14 Javascript

Vue渲染函数详解

2017/09/15 Javascript

element中el-container容器与div布局区分详解

2020/05/13 Javascript

微信小程序完美解决scroll-view高度自适应问题的方法

2020/08/08 Javascript

pyqt5自定义信号实例解析

2018/01/31 Python

python微信公众号之关注公众号自动回复

2018/10/25 Python

python网络编程使用UDP、TCP协议收发信息详解

2019/08/29 Python

Python协程操作之gevent(yield阻塞，greenlet)，协程实现多任务(有规律的交替协作执行)用法详解

2019/10/14 Python

Python大数据之使用lxml库解析html网页文件示例

2019/11/16 Python

PyCharm无法引用自身项目解决方式

2020/02/12 Python

Python socket连接中的粘包、精确传输问题实例分析

2020/03/24 Python

2020最新pycharm汉化安装（python工程狮亲测有效）

2020/04/26 Python

python实现文法左递归的消除方法

2020/05/22 Python

Python新手学习装饰器

2020/06/04 Python

Python之字典对象的几种创建方法

2020/09/30 Python

python爬取微博评论的实例讲解

2021/01/15 Python

中国制造网：Made-in-China.com

2019/10/25 全球购物

Java程序员综合测试题

2014/04/25 面试题

大学活动总结格式

2014/04/29 职场文书

工地标语大全

2014/06/18 职场文书

乡镇干部个人对照检查材料思想汇报（原创篇）

2014/09/28 职场文书

刑事辩护授权委托书格式

2014/10/13 职场文书

丧事答谢词

2015/01/05 职场文书