编程 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 对象的创建与使用

Mar 09 Javascript

常用的javascript function代码

May 23 Javascript

jquery 删除字符串最后一个字符的方法解析

Feb 11 Javascript

Jquery Post处理后不进入回调的原因及解决方法

Jul 15 Javascript

js实现鼠标滚轮控制图片缩放效果的方法

Feb 20 Javascript

快速学习jQuery插件 Form表单插件使用方法

Dec 01 Javascript

javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

Aug 19 Javascript

BootStrap iCheck插件全选与获取value值的解决方法

Aug 24 Javascript

浅谈javascript:两种注释,声明变量,定义函数

Sep 29 Javascript

js判断PC端与移动端跳转

Dec 24 Javascript

JavaScript面向对象程序设计创建对象的方法分析

Aug 13 Javascript

Element Dialog对话框的使用示例

Jul 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