功能简介: 类似手风琴的折叠效果
功能缺陷: 目标动态逐渐显示隐藏的段落, 但是现在的显示并不平滑
功能效果:
【折叠.html】
<!DOCTYPE html>
<head>
<head>
<meta charset="utf-8"/>
<title>折叠</title>
<link rel="stylesheet" href="折叠.css" type="text/css">
<script type="text/javascript" src="jquery-2.1.3.js"></script>
<script type="text/javascript" src="折叠.js"></script>
</head>
<body>
<div class="fourImagesNav">
<div class="imageAndText">
<div class="imageItem">
<img src="全国首个.png" alt="全国首个">
</div>
<div class="textItem">
<h4 ><a href="#"> 全国首个电子招投试点城市荣誉花落深圳</a></h5>
<p><a href="#">2014年7月, 全国首个电子招投试点城市荣誉花...</a></p>
</div>
</div>
<div class="imageAndText">
<div class="imageItem">
<img src="全国首个.png"/>
</div>
<div class="textItem">
<h4>公共资源交易中心作为公共资源</h4>
<p>政府主导、管办分离,集中交易、规范运行,部门监管</p>
</div>
</div>
<div class="imageAndText">
<div class="imageItem">
<img src="全国首个.png"/>
</div>
<div class="textItem">
<h4>多种不同的业务类型决定了</h4>
<p>多种不同的业务类型决定了业务流程的多样化。总体</p>
</div>
</div>
</div>
</body>
</head>
【折叠.css】
body{
font-size:12px;
}
.fourImagesNav{
position:absolute;
top:625px;
left:125px;
/*background-color:silver;*/
width:1150px;
height:215px;
margin-bottom:200px;
}
.imageAndText{
position:relative;
width:95px;
height:85px;
float:left;
margin-left:2px;
padding-left:2px;
margin-top:2px;
/*background-color:yellow;*/
overflow:hidden;
}
.imageItem{
float:left;
width:95px;
height:85px;
}
.textItem{
float:left;
width:200px;
height:85px;
/*background-color:pink;*/
}
.textItem h4 a{
text-decoration:none;
color:black;
}
.textItem p a,.firstImageText p a,.secondImageText p a{
text-decoration:none;
color:rgb(115,114,112);
}
.thirdImageText p a:hover,.firstImageText p a:hover,.secondImageText p a:hover{
color:black;
}
【折叠.js】
(function($){
var pre;
var cur;
function itemShow(){
$(".current").stop();
cur.delay(100).animate({//.delay():设置一个延时来推迟执行队列中之后的项目。 'width':'300px' },300);
pre.delay(100).animate({ 'width':'95px' },300);
}
$(document).ready(function(){
pre = cur = $($('.imageAndText')[0]);
cur.addClass('current');
cur.css({ 'width':'300px' });
$('.imageAndText').hover( function(){ if($(this)[0] != cur[0]){ pre=cur; pre.removeClass('current'); cur=$(this); cur.addClass("current"); itemShow(); } } );
});
})(jQuery);