标签：
下面是通过jquery，点击更换背景按钮来触发事件，从而改变body背景图片，先看下面的源码啊：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<style type="text/css">
*{margin: 0; margin: 0; border: 0;}
html{width: 100%; height: 100%;}
body{width: 100%; height: 100%; background-image: url(1.jpg);
overflow: hidden;
font-family: "微软雅黑","‘Segoe UI‘, Tahoma, Geneva, Verdana, sans-serif";
}
.content{color: white; background-color: #000; opacity: 0.3;}
.content h1{font-size: 60px; text-align: center;}
.content p{text-align: right;}
.content p input{height: 30px; background-color: orange; }
.footer{position: relative;
width: 1200px;
height:auto;
margin: 0 auto;
margin-top: 50px;
}
.f-content{
color: white;
width: 1200px;
margin: 0 auto;
height:auto;
font-size: 30px;
bottom: 0;
}
</style>
<script>
$(document).ready(function(){
var imgcount=4;//背景图片数量
var imgNow=0;//显示的背景图片位置
$("#bgbtn").click(function(){
imgNow=(imgNow+1)%imgcount;//数值在0-3之间循环
bgshow(imgNow) ;
})
})
function bgshow(imgNow){
var imgArry =new Array("url(1.jpg)","url(2.jpg)","url(3.jpg)","url(4.jpg)");//所需的图片url地址
var b=$("body");
var imgsr=imgArry[imgNow];
b.css("background-image",imgsr);
}
</script>
</head>
<body>
<div class="content">
<h1>周杰伦-晴天</h1>
<p><input type="button" id="bgbtn" value="点击更换背景" onclick="test()"/><p>
</div>
<div class="footer">
<div class="f-content">
<h3>晴天</h3>
<p>从出生那年就飘着</p>
<p>童年的荡秋千</p>
<p>随记忆一直晃到现在</p>
<p>rui sou sou xi dou xi la</p>
<p>吹着前奏望着天空...<input type="button" value="更多" onclick="bgshow(2)" style="background-color:white; opacity:0.2;"/></p>
</div>
</div>
</body>
</html>标签：
原文地址：http://blog.csdn.net/yy211zhu/article/details/51366827
