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

图片连续滚动代码[兼容IE/firefox]

Jun 11 Javascript

改善用户体验的五款jQuery插件分享

May 22 Javascript

jQuery Tools tab使用介绍

Jul 14 Javascript

js实现弹窗插件功能实例代码分享

Dec 12 Javascript

JavaScript面向对象的实现方法小结

Apr 14 Javascript

详解Javascript中的Object对象

Feb 28 Javascript

vue使用jsonp抓取qq音乐数据的方法

Jun 21 Javascript

微信小程序首页的分类功能和搜索功能的实现思路及代码详解

Sep 11 Javascript

js判断在哪个浏览器打开项目的方法

Jan 21 Javascript

google广告之另类js调用实现代码

Aug 22 Javascript

Vue 列表页带参数进详情页的操作(router-link)

Nov 13 Javascript

js闭包和垃圾回收机制示例详解

Mar 01 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中对各种加密算法、Hash算法的速度测试对比代码

2014/07/08 PHP

php header函数的常用http头设置

2015/06/25 PHP

Add Formatted Text to a Word Document

2007/06/15 Javascript

Jquery公告滚动+AJAX后台得到数据

2011/04/14 Javascript

谷歌地图打不开的解决办法

2014/08/07 Javascript

判断window.onload是否多次使用的方法

2014/09/21 Javascript

javascript获取select值的方法分析

2015/07/02 Javascript

Bootstrap每天必学之附加导航（Affix）插件

2016/04/25 Javascript

模拟javascript中的sort排序(简单实例)

2016/08/17 Javascript

微信小程序合法域名校验出错详解及解决办法

2017/03/09 Javascript

ES5 ES6中Array对象去除重复项的方法总结

2017/04/27 Javascript

vue学习笔记之指令v-text && v-html && v-bind详解

2017/05/12 Javascript

基于express中路由规则及获取请求参数的方法

2018/03/12 Javascript

详解JS转换数值函数Number()、parseInt()、parseFloat()

2018/08/24 Javascript

JavaScript实现的鼠标跟随特效示例【2则实例】

2018/12/22 Javascript

微信小程序下拉加载和上拉刷新两种实现方法详解

2019/09/05 Javascript

微信小程序转发事件实现解析

2019/10/22 Javascript

在Vue中使用Select选择器拼接label的操作

2020/10/22 Javascript

Python中处理时间的几种方法小结

2015/04/09 Python

在Python的Django框架中simple-todo工具的简单使用

2015/05/30 Python

Python正规则表达式学习指南

2016/08/02 Python

python3.6连接MySQL和表的创建与删除实例代码

2017/12/28 Python

python爬取个性签名的方法

2018/06/17 Python

python的sys.path模块路径添加方式

2020/03/09 Python

pandas抽取行列数据的几种方法

2020/12/13 Python

师范生自我鉴定范文

2013/10/05 职场文书

大三毕业自我鉴定

2014/01/15 职场文书

仓库组长岗位职责

2014/01/29 职场文书

社区消防工作实施方案

2014/03/21 职场文书

天网工程实施方案

2014/03/26 职场文书

公民授权委托书范本

2014/09/17 职场文书

2014年光棍节活动策划方案（创意集锦）

2014/09/29 职场文书

党支部群众路线整改措施思想汇报

2014/10/10 职场文书

乔迁之喜答谢词

2015/01/05 职场文书

《跨越海峡的生命桥》教学反思

2016/02/18 职场文书

Python Django模型详解

2021/10/05 Python