使用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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
js实现消息滚动效果
Jan 18 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
js实现移动端轮播图滑动切换
Dec 21 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 数组教程 定义数组
2009/10/23 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
拖动一个HTML元素
2006/12/22 Javascript
JQuery小知识
2010/10/15 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python对XML文件的操作实现代码
2020/03/27 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
服装创业计划书范文
2014/02/05 职场文书
《学会待客》教学反思
2014/02/22 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
晚会开幕词
2015/01/28 职场文书
公务员处分决定书
2015/06/25 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android