编程 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跨域代码片段

Aug 30 Javascript

用Javascript来生成ftp脚本的小例子

Jul 03 Javascript

js实现简单登录功能的实例代码

Nov 09 Javascript

javascript自动给文本url地址增加链接的方法分享

Jan 20 Javascript

jQuery实现tag便签去重效果的方法

Jan 20 Javascript

在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法

Aug 05 Javascript

Bootstrap模态框调用功能实现方法

Sep 19 Javascript

Vue 2中ref属性的使用方法及注意事项

Jun 12 Javascript

详解如何用babel转换es6的class语法

Apr 03 Javascript

layer.open提交子页面的form和layedit文本编辑内容的方法

Sep 27 Javascript

JS localStorage存储对象，sessionStorage存储数组对象操作示例

Feb 15 Javascript

解决pycharm双击但是无法打开的情况

Oct 31 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 中的一些经验积累

2006/10/09 PHP

PHP大批量数据操作时临时调整内存与执行时间的方法

2011/04/20 PHP

PHP中判断变量为空的几种方法小结

2013/11/12 PHP

PHP读取CURL模拟登录时生成Cookie文件的方法

2014/11/04 PHP

php连接odbc数据源并保存与查询数据的方法

2014/12/24 PHP

Joomla简单判断用户是否登录的方法

2016/05/04 PHP

使用vs code编辑调试php配置的方法

2019/01/29 PHP

常用简易JavaScript函数

2009/04/09 Javascript

js选择并转移导航菜单示例代码

2014/08/19 Javascript

浅析Javascript中“==”与“===”的区别

2014/12/23 Javascript

jquery使整个div区域可以点击的方法

2015/06/24 Javascript

javascript 中的 delete及delete运算符

2015/11/15 Javascript

javascript html5移动端轻松实现文件上传

2020/03/27 Javascript

Boostrap模态窗口的学习小结

2016/03/28 Javascript

深入理解React中es6创建组件this的方法

2016/08/29 Javascript

windows下vue-cli及webpack搭建安装环境

2017/04/25 Javascript

微信小程序新建登录页并实现tabBar隐藏

2017/06/13 Javascript

vue 请求后台数据的实例代码

2017/06/22 Javascript

vue 使用eventBus实现同级组件的通讯

2018/03/02 Javascript

Angularjs之如何在跨域请求中传输Cookie的方法

2018/06/01 Javascript

Vue 菜单栏点击切换单个class(高亮)的方法

2018/08/22 Javascript

详解ES7 Decorator 入门解析

2019/02/18 Javascript

Nodejs中怎么实现函数的串行执行

2019/03/02 NodeJs

js实现拖动缓动效果

2020/01/13 Javascript

JavaScript中交换值的10种方法总结

2020/08/18 Javascript

小白如何入门Python? 制作一个网站为例

2018/03/06 Python

解决Tensorflow使用pip安装后没有model目录的问题

2018/06/13 Python

python实现两个经纬度点之间的距离和方位角的方法

2019/07/05 Python

python中使用while循环的实例

2019/08/05 Python

Python使用Tkinter实现滚动抽奖器效果

2020/01/06 Python

让Django的BooleanField支持字符串形式的输入方式

2020/05/20 Python

如何利用python生成MD5并去重

2020/12/07 Python

Canon佳能美国官方商店：购买数码相机、数码单反相机、镜头和打印机

2016/11/15 全球购物

机械专业技术员求职信

2014/06/14 职场文书

Nginx服务器添加Systemd自定义服务过程解析

2021/03/31 Servers

pytorch通过训练结果的复现设置随机种子

2021/06/01 Python