使用js操作css实现js改变背景图片示例

2014-03-10 18

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>
展开阅读全文

更多Javascript文章

FLASH 广告之外的链接
Dec 16 31
基于javascript的JSON格式页面展示美化方法
Jul 02 22
利用a标签自动解析URL分析网址实例
Oct 20 22
vue实现点击图片放大效果
Aug 15 23
Angular 4.0学习教程之架构详解
Sep 12 23
jQuery实现简单的Ajax调用功能示例
Feb 15 20
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 29
手机访问当前页面