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

JavaScript代码简单实现求杨辉三角给定行的最大值

Oct 29 Javascript

深入理解javascript动态插入技术

Nov 12 Javascript

基于Bootstrap+jQuery.validate实现Form表单验证

Dec 16 Javascript

封装属于自己的JS组件

Jan 27 Javascript

Jquery对新插入的节点绑定Click事件失效的解决方法

Jun 02 Javascript

vue实现全选和反选功能

Aug 31 Javascript

React-router4路由监听的实现

Aug 07 Javascript

sortable+element 实现表格行拖拽的方法示例

Jun 07 Javascript

聊聊Vue 中 title 的动态修改问题

Jun 11 Javascript

JQuery实现折叠式菜单的详细代码

Jun 03 jQuery

使用Webpack 搭建 Vue3 开发环境过程详解

Jul 28 Javascript

微信小程序实现单个或多个倒计时功能

Nov 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验证码(支持中文)

2007/02/14 PHP

PHP静态调用非静态方法的应用分析

2013/05/02 PHP

解析PHP中的file_get_contents获取远程页面乱码的问题

2013/06/25 PHP

使用php清除bom示例

2014/03/03 PHP

PHP的Yii框架的常用日志操作总结

2015/12/08 PHP

Zend Framework框架路由机制代码分析

2016/03/22 PHP

PHP 7.1新特性的汇总介绍

2016/12/16 PHP

javascript检查浏览器是否支持flash的实现代码

2014/08/14 Javascript

jQuery实现鼠标划过修改样式的方法

2015/04/14 Javascript

Bootstrap模仿起筷首页效果

2016/05/09 Javascript

AngularJS基础 ng-include 指令简单示例

2016/08/01 Javascript

JS获取一个未知DIV高度的方法

2016/08/09 Javascript

JavaScript对象创建模式实例汇总

2016/10/03 Javascript

获取今天，昨天，本周，上周，本月，上月时间（实例分享）

2017/01/04 Javascript

vue cli升级webapck4总结

2018/04/04 Javascript

vue-baidu-map 进入页面自动定位的解决方案(推荐)

2018/04/28 Javascript

使用svg实现动态时钟效果

2018/07/17 Javascript

ES6中Set和Map数据结构，Map与其它数据结构互相转换操作实例详解

2019/02/28 Javascript

微信小程序的tab选项卡的实现效果

2019/05/15 Javascript

Node.js 中判断一个文件是否存在

2020/08/24 Javascript

python基础学习之如何对元组各个元素进行命名详解

2018/07/12 Python

python实现图片转字符小工具

2019/04/30 Python

通过python实现随机交换礼物程序详解

2019/07/10 Python

python lambda表达式（匿名函数）写法解析

2019/09/16 Python

python实现拼接图片

2020/03/23 Python

Python私有属性私有方法应用实例解析

2020/09/15 Python

Myholidays美国：在线旅游网站

2019/08/16 全球购物

linux下进程间通信的方式

2013/01/23 面试题

学生思想表现的评语

2014/01/30 职场文书

父母对孩子的寄语

2014/04/09 职场文书

旅游文化节策划方案

2014/06/06 职场文书

2015年党员自评材料

2014/12/17 职场文书

毕业实习证明范本

2015/06/16 职场文书

2015年中秋晚会主持稿

2015/07/30 职场文书

css3实现背景图片颜色修改的多种方式

2021/04/13 HTML / CSS

python中的class_static的@classmethod的巧妙用法

2021/06/22 Python