TAB 手风琴
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>手风琴</title>
<script type="text/javascript" src="http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js"></script>
</head>
<body>
<style>
#slider { position:absolute; width: 960px; height: 404px; left: 0px; top: 0px; overflow: hidden;}
#slider .slide { position: absolute; top: 0px; height: 404px; width: 100%; background: #fff; overflow: hidden; border-left: #fff solid 2px; cursor: default; }
#slider .title { color: #F80; font-weight: bold; font-size: 1.2em; margin-right: 1.5em; text-decoration: none; }
#slider .backgroundText { position: absolute; width: 210px; height: 100%; top: 100%; left:92px; background:url(../images/pdy_img_27.png) left top no-repeat;}
#slider .text { position: absolute; top: 1%; top: 100%; color: #000; font-family: verdana, arial, Helvetica, sans-serif; font-size: 0.9em; text-align: justify; width: 312px; left: 10px; }
#slider .diapo { position: absolute; top:0px; left:0px; /*visibility: hidden;*/ }
#slider .backgroundText h4{ width:190px; font-size:16px; color:#d12861; text-align:right; font-family:Microsoft Yahei; font-weight:normal; padding:0 10px; line-height:50px;}
#slider .backgroundText h4 a{ color:#222; font-size:22px; float:left;}
</style>
<div class="tjzt">
<div id="center">
<div id="slider">
<div style="border-left: medium none; left: 0px;" class="slide"> <a href="#" target="_blank"><img class="diapo" src="images/pdy_img_26.jpg" border="0"></a>
<div style="top: 14px;" class="backgroundText" >
1111111
</div>
<div style="top: 105px;" class="text"></div>
</div>
<div style="left: 312px;" class="slide"> <a href="" target="_blank"><img class="diapo" src="images/pdy_img_26.jpg" border="0"></a>
<div style="top: 14px;display:none" class="backgroundText" >
222222222
</div>
<div style="top: 105px;" class="text"> </div>
</div>
<div style="left: 420px;" class="slide"> <a href="" target="_blank"><img class="diapo" src="images/pdy_img_26.jpg" border="0"></a>
<div style="top: 14px;display:none" class="backgroundText" >
333333333
</div>
<div style="top: 106px;" class="text"> </div>
</div>
<div style="left: 528px;" class="slide"> <a href="" target="_blank"><img class="diapo" src="images/pdy_img_26.jpg" border="0"></a>
<div style="top: 14px;display:none" class="backgroundText" >
4444444444444
</div>
<div style="top: 106px;" class="text"> </div>
</div>
<div style="left: 636px;" class="slide"> <a href="" target="_blank"><img class="diapo" src="images/pdy_img_26.jpg" border="0"></a>
<div style="top: 14px;display:none" class="backgroundText" >
55555555555
</div>
<div style="top: 105px;" class="text"> </div>
</div>
<div style="left: 744px;" class="slide"> <a href="" target="_blank"><img class="diapo" src="images/pdy_img_26.jpg" border="0"></a>
<div style="top: 14px;display:none" class="backgroundText" >
6666666666
</div>
<div style="top: 105px;" class="text"> </div>
</div>
<div style="left: 852px;" class="slide"> <a href="" target="_blank"><img class="diapo" src="images/pdy_img_26.jpg" border="0"></a>
<div style="top: 14px;display:none" class="backgroundText" >
777777777777
</div>
<div style="top: 105px;" class="text"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#slider .slide').each(function(q){
var arr = ['0','108','216','324','432','540','648','756'];
var width = '204';
$(this).hover(function(){
$('.backgroundText').css('display','none');
$(this).children('.backgroundText').css('display','block');
for(var mrt=0;mrt<=q;mrt++){
$('#slider .slide:eq('+mrt+')').stop().animate({left:arr[mrt]+"px"});
}
for(var mrt2=q;mrt2<=6;mrt2++){
mrt2++;
$('#slider .slide:eq('+mrt2+')').stop().animate({left:eval(parseInt(arr[mrt2])+parseInt(width))+"px"});
}
});
});
</script>
</body>
</html>
