html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/demo2.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo2.js"></script>
</head>
<body>
<div id="header">
<div id="header-icon">
<div id="dcbg"><a href="javascript:;">换肤</a></div>
</div>
</div>
<div id="dpics">
<div id="pictop">
<div id="pictop-icon"><div id="dup"><a href="javascript:;">收起</a></div></div>
</div>
<div id="pic-con">
<div class="dpic"><img src="img/bg0.jpg"></div>
<div class="dpic"><img src="img/bg1.jpg"></div>
<div class="dpic"><img src="img/bg2.jpg"></div>
<div class="dpic"><img src="img/bg3.jpg"></div>
<div class="dpic"><img src="img/bg4.jpg"></div>
<div class="dpic"><img src="img/bg5.jpg"></div>
</div>
</div>
</body>
</html>
css:
*{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
#header{
width:100%;
height:30px;
background-color:#808080;
}
#header-icon{
width:800px;
height:30px;
margin:0 auto;
line-height:30px;
}
#dcbg a{
color:#ffffff;
text-decoration:none;
}
.dpic img{
width:100px;
}
.dpic{
float:left;
margin-top:10px;
margin-left:30px;
}
#pic-con{
width:900px;
margin:0 auto;
}
#dpics{
width:100%;
height:100px;
position:fixed;/*固定定位*/
top:0px;
left:0px;
background-color:#ffffff;
display:none;
}
#pictop{
width:100%;
height:20px;
border-bottom:solid 1px #b6ff00;
}
#pictop-icon{
width:900px;
height:20px;
margin:0 auto;
}
#dup{
float:right;
}
#dup a{
text-decoration:none;
color:red;
}
js:
$(function () {
$("#dcbg a").click(function () {
$("#dpics").show(1000);
});
$("#dup a").click(function () {
$("#dpics").hide(1000);
});
//$(".dpic img").click(function () {
// var bgsrc = $(this).attr("src");
// $("body").css("background-image", "url(" + bgsrc + ")");
//});
$(".dpic img").click(function () {
var i = $(this).attr("src");
$("body").css("background-image", "url(" + i + ")");
});
});