编程 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中Flash控件的自动激活 ObjectWrap

Mar 09 Javascript

jquery刷新页面的实现代码（局部及全页面刷新）

Jul 11 Javascript

node.js中的fs.chmod方法使用说明

Dec 18 Javascript

js选项卡的实现方法

Feb 09 Javascript

JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

Mar 25 Javascript

JavaScript数组去重的几种方法效率测试

Oct 23 Javascript

JS实现焦点图轮播效果的方法详解

Dec 19 Javascript

半个小时学json(json传递示例)

Dec 25 Javascript

easyui datebox 时间限制，datebox开始时间限制结束时间，datebox截止日期比起始日期大的实现代码

Jan 12 Javascript

利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法

Mar 29 Javascript

vue-loader中引入模板预处理器的实现

Sep 04 Javascript

vue实现全匹配搜索列表内容

Sep 26 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中几种常见的超时处理全面总结

2012/09/11 PHP

php中操作memcached缓存进行增删改查数据的实现代码

2014/08/15 PHP

PHP实现的猴王算法(猴子选大王)示例

2018/04/30 PHP

使用laravel的Eloquent模型如何获取数据库的指定列

2019/10/17 PHP

Git命令之分支详解

2021/03/02 PHP

bootstrap实现弹窗和拖动效果

2016/01/03 Javascript

JavaScript事件学习小结（三）js事件对象

2016/06/09 Javascript

require、backbone等重构手机图片查看器

2016/11/17 Javascript

vue2.0开发实践总结之入门篇

2016/12/06 Javascript

利用JS轻松实现获取表单数据

2016/12/06 Javascript

浅谈JavaScript中promise的使用

2017/01/11 Javascript

javascript实现复选框全选或反选

2017/02/04 Javascript

简单实现jQuery上传图片显示预览功能

2020/06/29 jQuery

vue中的event bus非父子组件通信解析

2017/10/27 Javascript

jQuery实现定时隐藏对话框的方法分析

2018/02/12 jQuery

vue-cli下的vuex的简单Demo图解(实现加1减1操作)

2018/02/26 Javascript

VUE 3D轮播图封装实现方法

2018/07/03 Javascript

Vue项目数据动态过滤实践及实现思路

2018/09/11 Javascript

基于nodejs的微信JS-SDK简单应用实现

2019/05/21 NodeJs

javascript实现blob加密视频源地址的方法

2019/08/08 Javascript

python面向对象_详谈类的继承与方法的重载

2017/06/07 Python

python实现协同过滤推荐算法完整代码示例

2017/12/15 Python

pandas分别写入excel的不同sheet方法

2018/12/11 Python

Python itertools.product方法代码实例

2020/03/27 Python

Python实现打包成库供别的模块调用

2020/07/13 Python

css3圆角边框和边框阴影示例

2014/05/05 HTML / CSS

美国求婚钻戒网站：Super Jeweler

2016/08/27 全球购物

PHP如何设置和取得Cookie值

2015/06/30 面试题

C语言笔试题

2014/09/04 面试题

汽车电子与维修专业大学生求职信

2013/09/28 职场文书

能源工程专业应届生求职信

2014/03/01 职场文书

2014年档案管理员工作总结

2014/12/01 职场文书

行政上诉状范文

2015/05/23 职场文书

农村婚庆主持词

2015/06/29 职场文书

Python matplotlib绘制条形统计图处理多个实验多组观测值

2022/04/21 Python

Java 多线程协作作业之信号同步

2022/05/11 Java/Android