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

原生js ActiveXObject获取execl里面的值

Nov 01 Javascript

使用jQuery jqPlot插件绘制柱状图

Dec 18 Javascript

详解JavaScript数组的操作大全

Oct 19 Javascript

谈谈jQuery Ajax用法详解

Nov 27 Javascript

js滚动条平滑移动示例代码

Mar 29 Javascript

vue实现可增删查改的成绩单

Oct 27 Javascript

微信小程序 request接口的封装实例代码

Apr 26 Javascript

Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

Jul 09 Javascript

浅谈angular4 ng-content 中隐藏的内容

Aug 18 Javascript

轻松理解vue的双向数据绑定问题

Oct 30 Javascript

浅谈如何通过node.js对数据进行MD5加密

May 16 Javascript

cordova+vue+webapp使用html5获取地理位置的方法

Jul 06 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边学边教》(02.Apache+PHP环境配置――上篇)

2006/12/13 PHP

PHP 危险函数全解析

2009/09/09 PHP

php 多继承的几种常见实现方法示例

2019/11/18 PHP

基于JQuery实现的图片自动进行缩放和裁剪处理

2014/01/31 Javascript

jQuery中[attribute*=value]选择器用法实例

2014/12/31 Javascript

javascript动态添加删除tabs标签的方法

2015/07/06 Javascript

js实现图片上传并正常显示

2015/12/19 Javascript

jquery对象和DOM对象的相互转换详解

2016/10/18 Javascript

AngularJS 与百度地图的结合实例

2016/10/20 Javascript

jQuery图片加载显示loading效果

2016/11/04 Javascript

Input文本框随着输入内容多少自动延伸的实现

2017/02/15 Javascript

Vue+axios 实现http拦截及路由拦截实例

2017/04/25 Javascript

vue2 前后端分离项目ajax跨域session问题解决方法

2017/04/27 Javascript

微信小程序之滚动视图容器的实现方法

2017/09/26 Javascript

bootstrap响应式导航条模板使用详解（含下拉菜单，弹出框）

2017/11/17 Javascript

Angular @HostBinding()和@HostListener()用法

2018/03/05 Javascript

JS实现判断图片是否加载完成的方法分析

2018/07/31 Javascript

在vue项目中使用md5加密的方法

2018/09/14 Javascript

Python 检查数组元素是否存在类似PHP isset()方法

2014/10/14 Python

python解析xml文件实例分析

2015/05/27 Python

Python实现将罗马数字转换成普通阿拉伯数字的方法

2017/04/19 Python

python数据结构之链表的实例讲解

2017/07/25 Python

python的多重继承的理解

2017/08/06 Python

深入学习Python中的上下文管理器与else块

2017/08/27 Python

浅谈Python小波分析库Pywavelets的一点使用心得

2019/07/09 Python

在python image 中安装中文字体的实现方法

2019/08/22 Python

python爬虫利器之requests库的用法(超全面的爬取网页案例)

2020/12/17 Python

北京某公司的.net笔试题

2014/03/20 面试题

计算机应用专业学生的自我评价分享

2013/11/03 职场文书

《望庐山瀑布》教学反思

2014/04/22 职场文书

村级换届选举方案

2014/05/10 职场文书

预备党员转正考核材料

2014/06/03 职场文书

街道党工委党的群众路线教育实践活动对照检查材料思想汇报

2014/10/05 职场文书

践行三严三实心得体会

2014/10/13 职场文书

2016年情人节问候语

2015/11/11 职场文书

你知道Java Spring的两种事务吗

2022/03/16 Java/Android