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

jquery的$getjson调用并获取远程的JSON字符串问题

Dec 10 Javascript

Jquery 选中表格一列并对表格排序实现原理

Dec 15 Javascript

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

Dec 17 Javascript

微信中一些常用的js方法汇总

Mar 12 Javascript

javascript变量声明实例分析

Apr 25 Javascript

javascript实现连续赋值

Aug 10 Javascript

javascript产生随机数方法汇总

Jan 25 Javascript

JavaScript实现反转字符串的方法详解

Apr 27 Javascript

canvas基础绘制-绚丽倒计时的实例

Sep 17 Javascript

React Native使用fetch实现图片上传的示例代码

Mar 07 Javascript

学习JS中的DOM节点以及操作

Apr 30 Javascript

webpack+vue-cli项目中引入外部非模块格式js的方法

Sep 28 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

ThinkPHP标签制作教程

2014/07/10 PHP

在Linux系统下一键重新安装WordPress的脚本示例

2015/06/30 PHP

PHP可变变量学习小结

2015/11/29 PHP

yii权限控制的方法(三种方法)

2015/12/28 PHP

PHP数据的提交与过滤基本操作实例详解

2016/11/11 PHP

PHP如何搭建百度Ueditor富文本编辑器

2018/09/21 PHP

小型js框架veryide.librar源代码

2009/03/05 Javascript

Javascript页面跳转常见实现方式汇总

2015/11/28 Javascript

JavaScript通过代码调用Flash显示的方法

2016/02/02 Javascript

jquery实现上传文件大小类型的验证例子(推荐)

2016/06/25 Javascript

原生js实现吸顶效果

2017/03/13 Javascript

微信小程序图片宽100%显示并且不变形

2017/06/21 Javascript

vue-cli脚手架引入图片的几种方法总结

2018/03/13 Javascript

vue2.0 实现页面导航提示引导的方法

2018/03/13 Javascript

详解react、redux、react-redux之间的关系

2018/04/11 Javascript

详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计

2018/08/31 Javascript

详解关于element级联选择器数据回显问题

2019/02/20 Javascript

如何检查一个对象是否为空

2019/04/11 Javascript

了解javascript中let和var及const关键字的区别

2019/05/24 Javascript

基于JavaScript实现贪吃蛇游戏

2020/03/16 Javascript

[02:34]肉山说——泡妞篇

2014/09/16 DOTA

python实现数独算法实例

2015/06/09 Python

python爬取各类文档方法归类汇总

2018/03/22 Python

使用Python通过win32 COM实现Word文档的写入与保存方法

2018/05/08 Python

解决Python中定时任务线程无法自动退出的问题

2019/02/18 Python

使用pyshp包进行shapefile文件修改的例子

2019/12/06 Python

Python 实现3种回归模型（Linear Regression，Lasso，Ridge）的示例

2020/10/15 Python

详解前端HTML5几种存储方式的总结

2016/12/27 HTML / CSS

总裁秘书岗位职责

2013/12/04 职场文书

2014爱耳日宣传教育活动总结

2014/03/09 职场文书

党员目标管理责任书

2014/07/25 职场文书

2014机关干部学习“焦裕禄精神”思想汇报

2014/09/19 职场文书

党的群众路线教育实践活动个人整改措施范文

2014/11/04 职场文书

具结保证书

2015/01/17 职场文书

小学家长意见怎么写

2015/06/03 职场文书

position:sticky 粘性定位的几种巧妙应用详解

2021/04/24 HTML / CSS