使用js操作css实现js改变背景图片示例
2014-03-10 00:00
801 查看
1、用JS定义一个图片数组,里面存放你想要随机展示的图片
上面的图片请大家换成自己的。
2、用JS产生一个随机数,当然这个随机数从0开始到imgArr.length-1结束
这样我们就得到当前随机产生的图片
3、既然随机产生了一张背景图,那就用JS把这个图片作为背景图吧。
由于这是一个demo,所以我在页面上定义了一个id为BackgroundArea的div,同时也是为这个div设置随机背景的。
ar imgArr=["http://www.jb51.net/logo_cn.png", "http://www.jb51.net/baidu_sylogo1.gif", "http://www.jb51.net/news/uploadImg/20120111/20120111081906_79.jpg", "http://www.jb51.net/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随机改变网页背景实现思路
- css命名规则
- CSS gradient渐变之webkit核心浏览器下的使用
- chrome 33+ 使用 custom.css 设置字体
- DIV+CSS制作斜线效果记录
- 纯css样式实现3角型
- HTML+CSS
- 根据input的type来控制css样式
- div align center实现内容居中 转化为CSS如何实现
- html中input type=file 改变样式
- 牢记 31 种 CSS 选择器用法
- css命名为何不推荐使用下划线_
- XHTML 验证器和 CSS 验证器
- 四个好看的CSS样式表格
- 搞懂em
- css省略过长文字 自动换行 不换行
- css文本控制
- css实现3角型
- css3 的一些不错的效果
- css样式表的写法理解