<doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现图片翻牌旋转特效</title>
<style>
*{margin:0px;padding:0px;}
li{list-style:none;}
#brand{
width:330px;
height:400px;
border:1px solid #dddddd;
box-shadow:0px 0px 5px #dddddd;
margin:30px auto;
}
#brand .title{
width:100%;
height:35px;
line-height:35px;
font-size:16px;
margin-top:4px;
border-bottom:2px solid #33261c;
text-align:center;
color:#33261c;
}
#brand .bd-box{
width:284px;
height:358px;
overflow:hidden;
padding:0px 24px;
}
#brand .bd-box li{
float:left;
width:122px;
height:77px;
overflow:hidden;
position:relative;
margin:10px 10px 0px 10px;
}
#brand .bd-box li img{
width:120px;
height:75px;
border:1px solid #e9e8e8;
position:absolute;
left:0px;
top:0px;
z-index:2;
overflow:hidden;
}
#brand .bd-box li span{
width:120px;
height:0px;
border:1px solid #e9e8e8;
position:absolute;
left:0px;
top:38px;
z-index:1;
text-align:center;
line-height:75px;
font-size:14px;
color:#FFF;
background:#ffa340;
font-weight:bold;
overflow:hidden;
display:none;
}
#brand .bd-box li a{
width:120px;
height:75px;
position:absolute;
left:0px;
top:0px;
z-index:3;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<div id="brand">
<div class='title'>
热门品牌推荐
</div>
<ul class='bd-box'>
<li>
<a href="http://www.school.com"> </a>
<img src="images/1.jpg" />
<span>肌龄</span>
</li>
<li>
<a href="http://www.school.com"> </a>
<img src="images/2.jpg" />
<span>肌龄</span>
</li>
<li>
<a href="http://www.school.com"> </a>
<img src="images/3.jpg" />
<span>肌龄</span>
</li>
<li>
<a href="http://www.school.com"> </a>
<img src="images/4.jpg" />
<span>肌龄</span>
</li>
<li>
<a href="http://www.school.com"> </a>
<img src="images/5.jpg" />
<span>肌龄</span>
</li>
<li>
<a href="http://www.school.com"> </a>
<img src="images/6.jpg" />
<span>肌龄</span>
</li>
<li>
<a href="http://www.school.com"> </a>
<img src="images/7.jpg" />
<span>肌龄</span>
</li>
<li>
<a href="http://www.school.com"> </a>
<img src="images/8.jpg" />
<span>肌龄</span>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
/*
1、鼠标移入 -- 改变li中 img 的 height = 0 top ： h/2 ， 改变span 的 height ：ｈ ｔｏｐ ： ０
2、鼠标移出 -- 改变 span 再改变 img
* */
$("li").hover(function(){
$(this).find("img").animate({"height" : 0 , "top" : 38},800,function(){
$(this).hide();
$(this).next().show().animate({"height" : 75 , "top" : 0},800);
})
},function(){
$(this).find("span").animate({"height" : 0 , "top" : 38},800,function(){
$(this).hide();
$(this).prev().show().animate({"height" : 75 , "top" : 0},800);
})
})
</script>