使用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 相关文章推荐
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
详解JavaScript 作用域
Jul 14 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
vue实现表格合并功能
Dec 01 Vue.js
红米手机抢购的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的输出:缓存并压缩动态页面
2013/06/11 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
webpack写jquery插件的环境配置
2017/12/21 jQuery
webpack实用小功能介绍
2018/01/02 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
scrapy爬虫完整实例
2018/01/25 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
pandas通过loc生成新的列方法
2018/11/28 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
舞蹈毕业生的自我评价
2014/03/05 职场文书
代办社保委托书范文
2014/10/06 职场文书
小班上学期个人总结
2015/02/12 职场文书
微信早安问候语
2015/11/10 职场文书
《绝招》教学反思
2016/02/20 职场文书