JS操作CSS随机改变网页背景实现思路

今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图，当然我的回答是可以的。具体可以这样做：
1、用JS定义一个图片数组，里面存放你想要随机展示的图片


代码如下:

var imgArr=["http://www.google.com.hk/intl/zh-CN/images/logo_cn.png",
"http://www.baidu.com/img/baidu_sylogo1.gif",
"http://www.open-open.com/news/uploadImg/20120111/20120111081906_79.jpg",
"http://www.open-open.com/news/uploadImg/20120111/20120111081906_76.jpg"
];

这里我随便找来了4张图片，凑活着看看。
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>

赞 (0)

相关推荐

  • 基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

    基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示: hover时显示二维码 二.实现 用如下这样一个简单的效果:鼠标hover到A上显示B来模拟 有2种实现方式,推荐第二种,第一种有弊端下面会说. 1.方法一 原理:把触发元素A和要显示元素B放于同一个父级元素内,鼠标经过父级元素时触发显示B.这样鼠标移动到B时仍然 处于该父级元素内,则div不会隐藏. 代码: <!DOCTYPE ht

  • js模仿hover的具体实现代码

    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="description" content="this" /> <meta name="keywords" content="this" /> <title>this</

  • js操作css属性实现div层展开关闭效果的方法

    本文实例讲述了js操作css属性实现div层展开关闭效果的方法.分享给大家供大家参考.具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果.将代码分享给JS前端设计者. <title>js操作div展开关闭</title> <style> #jb51 { border: solid 1px #EEE; background:#F7F7F7; ma

  • javascript解决IE6下hover问题的方法

    有时候我们想在非a标签上加hover元素 但是我们都知道IE6下不支持XX:hover,所以我们现在可以用js实现掉:代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • js hover 定时器(实例代码)

    js hover 定时器(实例代码)

    复制代码 代码如下: $("#showComp tr:not('.stlisttitle')").hover(function(){        try{if($("#calendarPanel").is(":visible")) $(".playerlist").hide();else{clearTimeout(timMess);        $(".playerlist").css("to

  • JavaScript实现为input与textarea自定义hover,focus效果的方法

    JavaScript实现为input与textarea自定义hover,focus效果的方法

    本文实例讲述了JavaScript实现为input与textarea自定义hover,focus效果的方法.分享给大家供大家参考.具体如下: 这里演示JavaScript为input输入框和textarea文本框自定义hover,focus效果,hover也就是鼠标放上去之后的效果,focus是鼠标焦点问题,要实现 这种效果,需要JS来配合,这个例子就是很不错的,它把网页上输入框和文本框都加入了鼠标悬停和鼠标焦点效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.n

  • JS实现css hover操作的方法示例

    JS实现css hover操作的方法示例

    本文实例讲述了JS实现css hover操作的方法.分享给大家供大家参考,具体如下: hover我们可以用css的方式写,当然,也可以用js的方式写 <html> <head> <title>js的下拉菜单效果</title> <style type="text/css"> *{ padding:0px; margin:0px; } ul li{ list-style: none; } a{ text-decoration:

  • 详解Javascript动态操作CSS

    一.使用js操作css属性的写法 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamil

  • jQuery控制图片的hover效果（smartRollover.js）

    用js实现的好处是:如果一个网站中图片的hover效果比较多,可能每一个都要有css控制,那样代码有的冗余.但是有了js控制,不管有多少图片,hover效果都可以用同样的js,但是必须保证图片的out/off效果和over/on效果命名有规律性,比如: navi01_out.jpg/navi01_off.jpg navi01_over.jpg/nvai02_on.jpg 这样js控制起来非常方便.找到匹配的名称,hover时替换成另一个名称. 今天我想用jQuery控制一下效果: 代码如下: 复

  • JS组件Bootstrap dropdown组件扩展hover事件

    JS组件Bootstrap dropdown组件扩展hover事件

    bootstrap导航条当中dropdown组件用得特别频繁,本文就为大家介绍bootstrap中的dropdown组件扩展hover事件,具体内容如下 如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的.细心者可以发现,下拉框出现时,其父级会有一个open的class属性.我们只需要监听hover事件时,给父级增加或删除open类就可以了. boostrap-hover-dropdown.js插件,托管在github上的代码网址:查看 下面是完整的js插件代码

  • 使用js操作css实现js改变背景图片示例

    1.用JS定义一个图片数组,里面存放你想要随机展示的图片 复制代码 代码如下: ar imgArr=["http://www.jb51.net/logo_cn.png","http://www.jb51.net/baidu_sylogo1.gif","http://www.jb51.net/news/uploadImg/20120111/20120111081906_79.jpg", "http://www.jb51.net/news/

随机推荐