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

File文件控件，选中文件(图片,flash,视频)即立即预览显示

Apr 09 Javascript

关于JavaScript的一些看法

May 27 Javascript

基于jquery的分页控件(C#)

Jan 06 Javascript

html+js实现动态显示本地时间

Sep 21 Javascript

深入剖析Express cookie-parser中间件实现示例

Feb 01 Javascript

JS构造一个html文本内容成文件流形式发送到后台

Jul 31 Javascript

对vue中v-on绑定自定事件的实例讲解

Sep 06 Javascript

zepto.js 实时监听输入框的方法

Dec 04 Javascript

js中arguments对象的深入理解

May 14 Javascript

解决小程序无法触发SESSION问题

Feb 03 Javascript

基于jsbarcode 生成条形码并将生成的条码保存至本地+源码

Apr 27 Javascript

JS实现炫酷轮播图

Nov 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

mysql5写入和读出乱码解决

2006/11/25 PHP

Google Voice 短信发送接口PHP开源版(2010.5更新)

2010/07/22 PHP

PHP学习笔记之一

2011/01/17 PHP

Zend Framework入门教程之Zend_Session会话操作详解

2016/12/08 PHP

PHPMAILER实现PHP发邮件功能

2018/04/18 PHP

Javascript下的keyCode键码值表

2007/04/10 Javascript

一步一步制作jquery插件Tabs实现过程

2010/07/06 Javascript

JS将所有对象s的属性复制给对象r(原生js+jquery)

2014/01/25 Javascript

Javascript基础教程之比较操作符

2015/01/18 Javascript

JS判断字符串字节数并截取长度的方法

2016/03/05 Javascript

vue2 如何实现div contenteditable=“true”(类似于v-model)的效果

2017/02/08 Javascript

JS html时钟制作代码分享

2017/03/03 Javascript

前端跨域的几种解决方式总结（推荐）

2017/08/16 Javascript

vue异步axios获取的数据渲染到页面的方法

2018/08/09 Javascript

Vue修改项目启动端口号方法

2019/11/07 Javascript

javascript canvas API内容整理

2020/02/16 Javascript

[01:22:29]真视界：2019年国际邀请赛总决赛

2020/01/29 DOTA

python设置windows桌面壁纸的实现代码

2013/01/28 Python

在Python的web框架中配置app的教程

2015/04/30 Python

Python中使用ElementTree解析XML示例

2015/06/02 Python

Java多线程编程中ThreadLocal类的用法及深入

2016/06/21 Python

TensorFlow实现非线性支持向量机的实现方法

2018/04/28 Python

python算法题链表反转详解

2019/07/02 Python

利用python实现短信和电话提醒功能的例子

2019/08/08 Python

python遍历文件目录、批量处理同类文件

2019/08/31 Python

python对指定字符串逆序的6种方法(小结)

2020/04/02 Python

Python建造者模式案例运行原理解析

2020/06/29 Python

详解Pycharm第三方库的安装及使用方法

2020/12/29 Python

CSS3中Color的一些特性介绍

2012/05/27 HTML / CSS

Html5导航栏吸顶方案原理与对比实现

2020/06/10 HTML / CSS

Ariat官网：美国马靴和服装品牌

2019/12/16 全球购物

红领巾心向党广播稿

2014/01/19 职场文书

公司接待方案

2014/03/08 职场文书

小学优秀教育工作者事迹材料

2014/05/09 职场文书

公司副总经理任命书

2014/06/05 职场文书

MyBatis自定义SQL拦截器示例详解

2021/10/24 Java/Android