使用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脚本调试方法小结
Nov 24 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
Javascript高级技巧分享
Feb 25 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 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
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Python numpy 点数组去重的实例
2018/04/18 Python
Python 字符串与数字输出方法
2018/07/16 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
毕业生如何写自荐信
2014/03/26 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
mysql函数全面总结
2021/11/11 MySQL