<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>九宫格延伸动画</title>
<style type="text/css">
body{background: url("images/bg1.jpg") no-repeat;}
*{margin: 0px;padding: 0px;}
#box{width: 906px;height:486px;border: 5px solid #fff;margin: 60px auto;}
#box ul li{
list-style: none;
position: relative;
float: left;
border: 1px solid #fff;
width: 300px;
height: 160px;
z-index: 10;
}
#box ul li a{
background:rgba(0,0,0,0.5);
font-size:60px;
font-weight: bold;
color:#fff;
font-style:黑体;
display: block;
position: absolute;
text-decoration:none;
left:0px;
top:0px;
z-index:10;
text-align:center;
height:160px;
width:100%;
line-height: 160px;
}
#box ul li img{z-index: 20;}
#box ul li img.right{ position:absolute; left:0px; top:0px;}
#box ul li img.left{ position:absolute; left:0px; top:0px;}
#box ul li img.top{ position:absolute; left:0px; top:0px;}
#box ul li img.bottom{ position:absolute; left:0px; top:0px;}
#box ul li img.default{position:absolute; left:0px; top:0px;z-index:30;}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<img src="images/img1.png" class="default"/>
<a href="#">1</a>
<img src="images/jr.jpg" class="right"/>
<img src="images/jt.jpg" class="bottom"/>
</li>
<li>
<img src="images/img2.png" class="default"/>
<a href="#">2</a>
<img src="images/seor.jpg" class="left"/>
<img src="images/pt.png" class="right"/>
<img src="images/snr.jpg" class="bottom"/>
</li>
<li>
<img src="images/img3.png" class="default"/>
<a href="#">3</a>
<img src="images/seob.jpg" class="left"/>
<img src="images/pl.jpg" class="bottom"/>
</li>
<li>
<img src="images/img4.png" class="default"/>
<a href="#">4</a>
<img src="images/seor.jpg" class="top"/>
<img src="images/snl.jpg" class="right"/>
<img src="images/pb.jpg" class="bottom"/>
</li>
<li>
<img src="images/img5.png" class="default"/>
<a href="#">5</a>
<img src="images/seor.jpg" class="top"/>
<img src="images/snl.jpg" class="right"/>
<img src="images/seob.jpg" class="left"/>
<img src="images/pb.jpg" class="bottom"/>
</li>
<li>
<img src="images/img6.png" class="default"/>
<a href="#">6</a>
<img src="images/seor.jpg" class="top"/>
<img src="images/seob.jpg" class="left"/>
<img src="images/pb.jpg" class="bottom"/>
</li>
<li>
<img src="images/img7.png" class="default"/>
<a href="#">7</a>
<img src="images/jb.jpg" class="top"/>
<img src="images/jr.jpg" class="right"/>
</li>
<li>
<img src="images/img8.png" class="default"/>
<a href="#">8</a>
<img src="images/jb.jpg"class="top" />
<img src="images/pl.jpg" class="left"/>
<img src="images/snl.jpg" class="right"/>
</li>
<li>
<img src="images/img9.png" class="default"/>
<a href="#">9</a>
<img src="images/jt.jpg" class="top"/>
<img src="images/jr.jpg" class="left"/>
</li>
</ul>
</div>
<script src="js/jquery.js"></script>
<script>
$("#box ul li").hover(function(){
$(this).css("z-index","20");/*不理解为什么要把li的层级从10变为20*/
$(this).find("a").css({"z-index":"40"},300);
$(this).find(".right").stop().animate({left:302+"px"},300);
$(this).find(".left").stop().animate({left:-302+"px"},300);
$(this).find(".bottom").stop().animate({top:162+"px"},300);
$(this).find(".top").stop().animate({top:-162+"px"},300);
},function(){
$(this).css("z-index","10");
/* $(this).find("img").stop().css({left:0+"px",top:0+"px"},300);*/
$(this).find(".default").css("z-index","30");
$(this).find(".left").stop().animate({left:0+"px"},300);
$(this).find(".right").stop().animate({left:0+"px"},300);
$(this).find(".top").stop().animate({top:0+"px"},300);
$(this).find(".bottom").stop().animate({top:0+"px"},300);
$(this).find("a").css("z-index","10");
});
</script>
</body>
</html>
九宫格延伸效果Html
需积分: 1 92 浏览量
2015-11-23
13:19:34
上传
评论
收藏 1.74MB ZIP 举报
九宫格延伸效果.zip （39个子文件） 
九宫格延伸效果 images 
pl.jpg 33KB wr.jpg 38KB
img9.png 5KB snr.jpg 44KB img7.png 6KB taob.jpg 40KB snl.jpg 50KB syl.jpg 32KB wt.jpg 30KB img2.png 5KB seob.jpg 20KB wll.jpg 49KB img3.png 5KB taol.jpg 40KB img1.png 5KB pt.png 25KB pb.jpg 46KB ynr.jpg 19KB seor.jpg 31KB snt.jpg 57KB jb.jpg 34KB img12.png 5KB jt.jpg 34KB ynt.jpg 19KB
Thumbs.db 137KB wb.jpg 48KB bg.jpg 86KB syb.jpg 41KB img4.png 5KB taor.jpg 35KB wlt.jpg 41KB img8.png 4KB img5.png 5KB wl.jpg 39KB jr.jpg 30KB img6.png 5KB bg1.jpg 726KB js jquery.js 94KB
extends.html 5KB资源评论
