自引jquery
css
<style>
*{margin:0px;padding:0px;}
li{list-style:none;}
#brand{
330px;
height:400px;
border:1px solid #dddddd;
box-shadow:0px 0px 5px #dddddd;
margin:30px auto;
}
#brand .title{
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{
284px;
height:358px;
overflow:hidden;
padding:0px 24px;
}
#brand .bd-box li{
float:left;
122px;
height:77px;
overflow:hidden;
position:relative;
margin:10px 10px 0px 10px;
}
#brand .bd-box li img{
120px;
height:75px;
border:1px solid #e9e8e8;
position:absolute;
left:0px;
top:0px;
z-index:2;
overflow:hidden;
}
#brand .bd-box li span{
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{
120px;
height:75px;
position:absolute;
left:0px;
top:0px;
z-index:3;
}
</style>
html、js
<body>
<div id="brand">
<div class='title'>
热门品牌推荐
</div>
<ul class='bd-box'>
<li>
<a href="此处链接在外面"> </a>
<img src="images/1.jpg" />
<span>背面</span>
</li>
<li>
<a href="此处链接在外面"> </a>
<img src="images/2.jpg" />
<span>背面</span>
</li>
<li>
<a href="此处链接在外面"> </a>
<img src="images/3.jpg" />
<span>背面</span>
</li>
<li>
<a href="此处链接在外面"> </a>
<img src="images/4.jpg" />
<span>背面</span>
</li>
<li>
<a href="此处链接在外面"> </a>
<img src="images/5.jpg" />
<span>背面</span>
</li>
<li>
<a href="此处链接在外面"> </a>
<img src="images/6.jpg" />
<span>背面</span>
</li>
<li>
<a href="此处链接在外面"> </a>
<img src="images/7.jpg" />
<span>背面</span>
</li>
<li>
<a href="此处链接在外面"> </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
* */
var h = $("ul li:first").height();//获取第一li的一个高度
$("ul li").hover(function(){
$(this).find('img').animate({
height : 0,
top : h / 2
},500,function(){
$(this).hide();
$(this).next().show().animate({height:h,top:0},500);
})
},function(){
$(this).find("span").animate({
height : 0,
top : h / 2
},500,function(){
$(this).prev().hide();
$(this).prev().show().animate({height:h,top:0},500)
})
})
</script>
