使用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>
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 职场文书