使用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 相关文章推荐
JQuery写动态树示例代码
Jul 31 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 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
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
Django ORM filter() 的运用详解
2020/05/14 Python
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
企业统计员岗位职责
2013/12/13 职场文书
安全生产检查通报
2014/01/29 职场文书
年会主持词结束语
2014/03/27 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
重阳节简报
2015/07/20 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏