使用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 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
js数组实现权重概率分配
Sep 12 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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 字符串函数收集
2010/03/29 PHP
php验证码实现代码(3种)
2015/09/07 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
Javascript实现时间倒计时效果
2017/07/15 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
Python变量作用范围实例分析
2015/07/07 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
露营世界:Camping World
2017/02/02 全球购物
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
红领巾广播站广播稿
2014/02/01 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
学校周年庆活动方案
2014/08/22 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
浅谈Python魔法方法
2021/06/28 Java/Android