01板块结构
<div id="work-wrap" style=" " class="work-wrap">
<div class="work-content" style="">
<div class="work-content-body" style="">
<div class="number" style="font-size:90px;width:150px;font-family:'宋体';padding-left:20px">03</div>
<div class="title" style="width:280px;text-align:right;padding-top:30px;font-family:'宋体';">
<h2 style="color:#666;font-size:22px;" >淘钢云商金融服务平台</h2>
<p style="color:#666;font-size:16px;">financial service platform</p>
</div>
<div class="centerImg" style="margin-left:20px;">
<img src="../../images/20200107/mg003.png" />
</div>
<div class="boody-des" style="width:340px;color:#666;letter-spacing:2px;line-height:26px;margin-left:20px;margin-top:40px;">
<p style="font-size:16px;">如何赊销采购商品？</p>
</div>
<div class="close open"></div>
</div>
<div class="work-detail" style="display:none;">
<p style="width:1000px;font-size:14px;color:#666;letter-spacing:2px;line-height:22px;margin-left:60px;margin-bottom:20px;text-indent:2em;">
现货商城选购商品-下单-联系我们。
</p>
</div>
</div>
</div>
#work-wrap .work-content{
width:1200px;
border-bottom:2px dashed #e0e0e0;
margin-bottom:50px;
}
#work-wrap .work-content .work-detail{
display:none;
margin-left:45px;
}
#work-wrap .work-content .work-content-body{
height:116px;
padding-bottom:30px;
}
#work-wrap .work-content .work-content-body *{
float:left;
}
#work-wrap .work-content .work-content-body .close{
width:67px;
height:67px;
background:url(../images/20200107/open.png) no-repeat;
cursor:pointer;
margin-left:60px;
margin-top:20px;
transition:all 0.5s ease 0s;
}
#work-wrap .work-content .work-content-body .close.open{
background:url(../images/20200107/open.png) no-repeat 0 -67px;
transition:all 0.5s ease 0s;
}
<script>
var oDiv=$('.work-wrap');
var ocenterImgs=oDiv.find('.centerImg');
var oIcons=oDiv.find('.close');
var oDteail=oDiv.find('.work-detail');
var nowIndex=0;
ocenterImgs.add(oIcons).hover(function(){
$(this).addClass('animated tada')
},function(){
$(this).removeClass('animated tada')
})
function goSlide(){
if(oIcons.eq(nowIndex).hasClass('open')){
oDteail.stop().slideUp()
oIcons.removeClass('open')
}else{
oDteail.stop().slideUp(300).delay(300).eq(nowIndex).slideDown(300);
oIcons.removeClass('open').eq(nowIndex).addClass('open')
}
}
oIcons.click(function(){
nowIndex=oIcons.index($(this));
goSlide()
})
ocenterImgs.click(function(){
nowIndex=ocenterImgs.index($(this));
goSlide()
})
</script>
