编程 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 相关文章推荐

Convert Seconds To Hours

Jun 16 Javascript

Jqgrid设置全选(选择)及获取选择行的值示例代码

Dec 28 Javascript

JavaScript中setUTCMilliseconds()方法的使用详解

Jun 12 Javascript

Bootstrap模态框(modal)垂直居中的实例代码

Aug 18 Javascript

js实现交通灯效果

Jan 13 Javascript

浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

Jun 25 Javascript

vue-router 路由基础的详解

Oct 17 Javascript

javascript动态创建对象的属性详解

Nov 07 Javascript

JavaScript 面向对象基础简单示例

Oct 02 Javascript

浅谈javascript如何获取文件后缀名

Aug 07 Javascript

javascript实现智能手环时间显示

Sep 18 Javascript

微信小程序反编译的实现

Dec 10 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

php 获得汉字拼音首字母的函数

2009/08/01 PHP

PHP实现事件机制的方法

2015/07/10 PHP

php对接java现实加签验签的实例

2016/11/25 PHP

php实现文章评论系统

2019/02/18 PHP

Prototype使用指南之array.js

2007/01/10 Javascript

Javascript 判断客户端浏览器类型代码

2010/03/01 Javascript

不同的jQuery API来处理不同的浏览器事件

2012/12/09 Javascript

提示$ is not defined错误分析及解决

2013/04/09 Javascript

分享一个常用的javascript静态类

2014/12/31 Javascript

JavaScript常用本地对象小结

2016/03/28 Javascript

AngularJS中实现用户访问的身份认证和表单验证功能

2016/04/21 Javascript

基于JQuery及AJAX实现名人名言随机生成器

2017/02/10 Javascript

简单实现js点击展开二级菜单功能

2017/05/16 Javascript

详解用node编写自己的cli工具

2017/05/23 Javascript

微信小程序对接七牛云存储的方法

2017/07/30 Javascript

实例解析ES6 Proxy使用场景介绍

2018/01/08 Javascript

JS实现横向跑马灯效果代码

2020/04/20 Javascript

Javascript异步执行不按顺序解决方案

2020/04/30 Javascript

Python写的一个简单DNS服务器实例

2014/06/04 Python

Python实现以时间换空间的缓存替换算法

2016/02/19 Python

Anconda环境下Vscode安装Python的方法详解

2020/03/29 Python

Python中的__init__作用是什么

2020/06/09 Python

用Python开发app后端有优势吗

2020/06/29 Python

意大利在线药房：Farmacia Loreto Gallo

2019/08/09 全球购物

中专生学习生活的自我评价分享

2013/10/27 职场文书

科室工作的个人自我评价

2013/10/30 职场文书

高中毕业生生活的自我评价

2013/12/08 职场文书

行政助理的岗位职责

2014/02/18 职场文书

公司活动方案范文

2014/03/06 职场文书

公司副总经理任命书

2014/06/05 职场文书

高中班主任评语

2014/12/30 职场文书

公司优秀员工推荐信

2015/03/24 职场文书

2015年商场工作总结

2015/04/27 职场文书

党员违纪检讨书

2015/05/05 职场文书

入党转正介绍人意见

2015/06/03 职场文书

教你用eclipse连接mysql数据库

2021/04/22 MySQL