使用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 相关文章推荐
项目实践之javascript技巧
Dec 06 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
js实现简易聊天对话框
Aug 17 Javascript
Django使用多数据库的方法
Sep 06 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
Bootstrap实现省市区三级联动(亲测可用)
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
You might like
建立动态的WML站点(三)
2006/10/09 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
js option删除代码集合
2008/11/12 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
TensorFlow损失函数专题详解
2018/04/26 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python错误处理操作示例
2018/07/18 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
Europcar比利时:租车
2019/08/26 全球购物
前处理班长职位说明书
2014/03/01 职场文书
初三新学期计划书
2014/05/03 职场文书
医德医风自我评价
2014/09/19 职场文书
小学教师求职信范文
2015/03/20 职场文书
民事调解书范文
2015/05/20 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
详解java如何集成swagger组件
2021/06/21 Java/Android
mysql配置SSL证书登录的实现
2021/09/04 MySQL
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL