html 代码:
<!--手风琴效果-->
<div class="flash4">
<ul>
<li class="first">
<div class="imgTop"><img src="http://www.jq22.com/img/cs/500x500-1.png" alt="" class="tm" width="538" height="405"></div>
<div class="imgCen">给你15分钟做“对”的时尚人</div>
<div class="imgBot"> <a href="###">
<p class="bt_1">服饰</p>
<p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p>
</a> </div>
</li>
<li>
<div class="imgTop"><img src="http://www.jq22.com/img/cs/500x500-2.png" alt="" width="538" height="405"></div>
<div class="imgCen">蒂芙尼为你吟唱一曲自然颂</div>
<div class="imgBot"> <a href="###">
<p class="bt_1">服饰</p>
<p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p>
</a> </div>
</li>
<li>
<div class="imgTop"><img src="http://www.jq22.com/img/cs/500x500-6.png" alt="" width="538" height="405"></div>
<div class="imgCen">重返20岁试用周</div>
<div class="imgBot"> <a href="###">
<p class="bt_1">服饰</p>
<p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p>
</a> </div>
</li>
<li class="fast">
<div class="imgTop"><img src="http://www.jq22.com/img/cs/500x500-7.png" alt="" width="538" height="405"></div>
<div class="imgCen">玩美女孩盖天天 阳光女神进阶攻略</div>
<div class="imgBot"> <a href="###">
<p class="bt_1">服饰</p>
<p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p>
</a> </div>
</li>
</ul>
</div>
<!--手风琴结束-->
css代码:
@charset "utf-8";
* {
margin:0px;
padding:0px;
font-family:"微软雅黑";
font-size:12px;
text-decoration:none;
list-style-type:none;
}
img {
border:0px;
}
.flash4 {
width:1180px;
height:450px;
margin:0px auto;
margin-bottom:20px;
position:relative;
}
.flash4 ul li {
width:106px;
height:450px;
border-left:1px solid #000;
position:relative;
overflow:hidden;
float:left;
}
.flash4 ul li .imgTop img {
opacity:0.4;
}
.flash4 ul li .imgTop img.tm {
opacity:1;
}
.flash4 ul li .imgCon {
width:538px;
height:405px;
}
.flash4 ul li .imgCen {
width:538px;
height:50px;
background:rgba(0,0,0,0.5);
color:#fff;
font-size:20px;
line-height:50px;
position:absolute;
left:0px;
bottom:45px;
text-indent:20px;
display:none;
}
.flash4 ul li .imgBot {
width:538px;
height:45px;
background:#222;
}
.flash4 ul li .imgBot p.bt_1 {
width:80px;
line-height:45px;
font-size:16px;
color:#fff;
text-indent:20px;
float:left;
}
.flash4 ul li .imgBot p.bt_2 {
width:458px;
height:45px;
line-height:45px;
float:left;
display:none;
}
.flash4 ul li .imgBot p.bt_2 span {
font-size:14px;
color:#fff;
padding-right:30px;
background:url(../images/part2_icon.png)no-repeat left center;
padding-left:10px;
}
.flash4 ul li.first {
width:538px;
}
.flash4 ul li.fast {
position:absolute;
right:0px;
bottom:0px;
}
jquery代码:
//手风琴动画效果
var _index7 = 0;
$(".flash4 ul li").mouseover(function() {
//$(this)当前对象设置正常宽度,而同级元素进行缩小宽度并隐藏其他元素。
_index7 = $(this).index();
$(this).stop().animate({
width: 538
}, 500).siblings("li").stop().animate({
width: 106
}, 500);
$(".imgCen").eq(_index7).css("display", "block").siblings(".imgCen").css("display", "none");
$("p.bt_2").eq(_index7).css("display", "block").siblings("p.bt_2").css("display", "none");
$(".imgTop img").eq(_index7).addClass("tm").siblings(".imgTop img").removeClass("tm");
});
$(".flash4 ul li").mouseout(function() {
$(this).eq(_index7).stop().animate({
width: 106
}, 500);
$(".imgCen").css("display", "none");
$("p.bt_2").css("display", "none");
});