使用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>
Javascript 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
关于JavaScript的一些看法
May 27 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
js中arguments对象的深入理解
May 14 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
JS实现炫酷轮播图
Nov 15 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
mysql5写入和读出乱码解决
2006/11/25 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP学习笔记之一
2011/01/17 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
python设置windows桌面壁纸的实现代码
2013/01/28 Python
在Python的web框架中配置app的教程
2015/04/30 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
python算法题 链表反转详解
2019/07/02 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
红领巾心向党广播稿
2014/01/19 职场文书
公司接待方案
2014/03/08 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
公司副总经理任命书
2014/06/05 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android