<!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/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#btnlist,#list
{
width:300px;
height:100px;
border:1px solid #333;
margin:10px auto;
}
ul,li
{
list-style:none;
padding:0;
margin:0;
}
h2
{
text-align:center;
width:300px;
border:1px solid #333;
margin:0 auto;
}
#btnlist li,#list li
{
width:100px;
float:left;
height:50px;
font-size:14px;
line-height:28px;
position:relative;
z-index:1;
text-align:center;
}
#btnlist li a,#list li a
{
display:block;
height:28px;
border:2px solid #e0e0e0;
text-decoration:none;
width:50px;
background:#888;
overflow:hidden;
position:absolute;
left:25px;
top:10px;
}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
//横翻
$("#btnlist li").hover(
function () {
$("a", this).animate({ width: "0px", left: "50px" }, 80);
$("a", this).animate({ width: "50px", left: "25px" }, 80);
$("a", this).css('background', "yellow");
},
function () {
$("a", this).animate({ width: "0px", left: "50px" }, 80);
$("a", this).animate({ width: "50px", left: "25px" }, 80);
$("a", this).css('background', "#888");
});
$("#btnlist li a").click(
function () {
$(this).parents("li").css("z-index", "2")
$(this).animate({ height: "558px", top: "-255px", width: "1000px", left: "-460px", opacity: 'toggle', lineHeight: '558px', fontSize: '500px' }, 1000);
$(this).animate({ height: "28px", top: "10px", width: "50px", left: "25px", opacity: 'toggle', lineHeight: '28px', fontSize: '12px' }, 400);
$(this).parents("li").css("z-index", "1")
});
//竖翻
$("#list li").hover(
function () {
$("a", this).animate({ height: "0px", top: "25px" }, 80);
$("a", this).animate({ height: "28px", top: "10px" }, 80);
$("a", this).css('background', "yellow");
},
function () {
$("a", this).animate({ height: "0px", top: "25px" }, 80);
$("a", this).animate({ height: "28px", top: "10px" }, 80);
$("a", this).css('background', "#888");
});
$("#list li a").click(
function () {
$(this).parents("li").css("z-index", "2")
$(this).animate({ height: "558px", top: "-255px", width: "1000px", left: "-460px", opacity: 'toggle', lineHeight: '558px', fontSize: '500px' }, 1000);
$(this).animate({ height: "28px", top: "10px", width: "50px", left: "25px", opacity: 'toggle', lineHeight: '28px', fontSize: '12px' }, 400);
$(this).parents("li").css("z-index", "1")
});
});
</script>
</head>
<body>
<h2>横翻</h2>
<ul id="btnlist">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
<h2>竖翻</h2>
<ul id="list">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</body>
</html>
