使用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 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
javascript void(0)的妙用
2009/10/21 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
详解Python中的type()方法的使用
2015/05/21 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
给交警的表扬信
2014/01/12 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
经典演讲稿汇总
2014/05/19 职场文书
投标单位介绍信
2015/05/05 职场文书
党支部意见范文
2015/06/02 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL