使用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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
PHP新手上路(五)
2006/10/09 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
Python内置函数delattr的具体用法
2017/11/23 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
Django操作session 的方法
2020/03/09 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
keras中的History对象用法
2020/06/19 Python
django使用graphql的实例
2020/09/02 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
档案室主任岗位职责
2014/02/12 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
八年级物理教学反思
2016/02/19 职场文书
2019个人半年工作总结
2019/06/21 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
Nginx动静分离配置实现与说明
2022/04/07 Servers