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

各情景下元素宽高的获取实现代码

Sep 13 Javascript

纯js实现瀑布流展现照片(自动适应窗口大小)

Apr 08 Javascript

jquery导航制件jquery鼠标经过变色效果示例

Dec 05 Javascript

浅谈JavaScript function函数种类

Dec 29 Javascript

jQuery表单域选择器用法分析

Feb 10 Javascript

基于jQuery实现的QQ表情插件

Aug 25 Javascript

JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法

Jan 12 Javascript

js点击文本框弹出可选择的checkbox复选框

Feb 03 Javascript

快速使用Bootstrap搭建传送带

May 06 Javascript

jQuery滚动监听实现商城楼梯式导航效果

Mar 06 Javascript

angularJs使用ng-repeat遍历后选中某一个的方法

Sep 30 Javascript

webpack+express实现文件精确缓存的示例代码

Jun 11 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 in_array 函数使用说明与in_array需要注意的地方说明

2010/04/13 PHP

php中将字符串转为HTML的实体引用的一个类

2013/02/03 PHP

腾讯CMEM的PHP扩展编译安装方法

2015/09/25 PHP

PHP设计模式之装饰器模式定义与用法简单示例

2018/08/13 PHP

Laravel 类和接口注入相关的代码

2019/10/15 PHP

Javascript Function对象扩展之延时执行函数

2010/07/06 Javascript

js最简单的拖拽效果实现代码

2010/09/24 Javascript

javascript简单实现表格行间隔显示颜色并高亮显示

2013/11/29 Javascript

ExtJs纵坐标值重复问题的解决方法

2014/02/27 Javascript

jquery网页回到顶部效果(图标渐隐,自写)

2014/06/16 Javascript

js在数组中删除重复的元素自保留一个(两种实现思路)

2014/08/22 Javascript

JS脚本根据手机浏览器类型跳转WAP手机网站（两种方式）

2015/08/04 Javascript

基于bootstrap实现广告轮播带图片和文字效果

2016/07/22 Javascript

JS创建Tag标签的方法详解

2017/06/09 Javascript

使用JavaScript根据图片获取条形码的方法

2017/07/04 Javascript

微信小程序实现tab左右切换效果

2020/11/15 Javascript

如何基于viewport vm适配移动端页面

2020/11/13 Javascript

tornado捕获和处理404错误的方法

2014/02/26 Python

Python类方法__init__和__del__构造、析构过程分析

2015/03/06 Python

python实现简单温度转换的方法

2015/03/13 Python

python每隔N秒运行指定函数的方法

2015/03/16 Python

Android应用开发中Action bar编写的入门教程

2016/02/26 Python

python增加矩阵维度的实例讲解

2018/04/04 Python

对Python 多线程统计所有csv文件的行数方法详解

2019/02/12 Python

Python3解释器知识点总结

2019/02/19 Python

浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)

2019/08/12 Python

彻底搞懂python 迭代器和生成器

2020/09/07 Python

如何用Python绘制3D柱形图

2020/09/16 Python

python中pivot()函数基础知识点

2021/01/03 Python

Python爬虫爬取微博热搜保存为 Markdown 文件的源码

2021/02/22 Python

使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE

2013/01/23 HTML / CSS

一款纯css3制作的2015年元旦雪人动画特效教程

2014/12/29 HTML / CSS

C#可否对内存进行直接的操作

2015/02/26 面试题

预备党员党课思想汇报

2014/01/13 职场文书

python执行js代码的方法

2021/05/13 Python

Python上下文管理器Content Manager

2021/06/26 Python