标签：css html html5 jquery javascript
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
*{margin:0px ; padding:0px;}
body{background:url("imgs/1.jpg")no-repeat fixed;background-size:cover;}
.button{position:fixed;left:20px;top:0px;cursor:pointer;}
.web{width:1210px;height:70px;border:1px solid #CCFF00;display:none;
box-shadow:0px 0px 10px #000;margin:5px auto;}
.web .prev{
width:52px;height:70px;
background:rgba(212,212,212,0.7);
color:#FFF;font-weight:900;
text-align:center;line-height:70px;
float:left;margin:0px;
}
.web .pic{
width:1106px;height:70px;
background:rgba(204,252,197,0.7);
float:left;overflow:hidden}
.web .pic ul{list-style:none;}
.web .pic ul li {width:150 ;height:68px ;border:1px solid #3DAE20;
float:left;margin:0px 3px;position:relative;}
.web .pic ul li img{width:150 ;height:68px ;}
.web .pic ul li p {width:150 ;height:68px ;background:rgba(0,0,0,0.5);
position:absolute;top:0px;left:0px;}
.web .last{
width:52px;height:70px;
background:rgba(212,212,212,0.7);
color:#FFF;font-weight:900;
text-align:center;line-height:70px;
float:left;margin:0px;
}
</style>
</HEAD>
<BODY >
<img class="button" src = "imgs/10.png"width=30px height=42.5px />
<div class="web">
<div class= "prev">
<h1><</h1>
</div>
<div class="pic">
<ul>
<li><img src="imgs/1.jpg"/>
<p></p>
</li>
<li><img src="imgs/2.jpg"/>
<p></p>
</li>
<li><img src="imgs/3.jpg"/>
<p></p>
</li>
<li><img src="imgs/4.jpg"/>
<p></p>
</li>
<li><img src="imgs/5.jpg"/>
<p></p>
</li>
<li><img src="imgs/6.jpg"/>
<p></p>
</li>
<li><img src="imgs/7.jpg"/>
<p></p>
</li>
</ul>
</div>
<div class= "last">
<h1>></h1>
</div>
</div>
<script type = "text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript">
$(".button").click(function(){
//alert("点击");
$(this).fadeOut(1000);
$(".web").fadeIn(2000);
});
$(".pic ul li").hover(function(){
$(this).children("p").stop().animate({top:"72px"},300);
},function(){
$(this).children("p").stop().animate({top:"0px"},300);
});
$(".pic ul li").click(function(){
var i = $(this).index();
//alert(i);
i+=1;
$("body").css("background","url(imgs/"+i+".jpg)");
});
</script>
</BODY>
</HTML>
</span></strong>
标签：css html html5 jquery javascript
原文地址：http://blog.csdn.net/u012651389/article/details/43939435
