使用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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
js选项卡的实现方法
Feb 09 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
vue实现全匹配搜索列表内容
Sep 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
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
Git命令之分支详解
2021/03/02 PHP
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Python itertools.product方法代码实例
2020/03/27 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
C语言笔试题
2014/09/04 面试题
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
行政上诉状范文
2015/05/23 职场文书
农村婚庆主持词
2015/06/29 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
Java 多线程协作作业之信号同步
2022/05/11 Java/Android