一、需求

最近一个项目中需要用到一个类似手风琴的效果，我立刻想到网上各种Accordion组件来实现。效果大致如下图：

效果图

但看过了知名的几款组件（包括Accordionza）均不能满足这个需求。主要问题为：

只能在水平方向展示，不能用在垂直方向
只支持点击切换，不支持鼠标滑过切换
title栏只能在一个滑动项的顶部，不能自定义到底部

于是准备自己写一个。
二、思路

假设有4张图片，每张图片的底部为标题并且叠加在图片上面。当鼠标滑过每张的标题时，显示该图片的全部。
要实现鼠标滑过的垂直手风琴效果，我的思路大致如下：

容器为固定尺寸，切不允许溢出
子项目，即各张图片均为绝对定位
初始化时，只把第一张图片全部露出，其他图片通过设置其top值和z-index值，均被上一张盖住除标题以外的部分
当鼠标滑过某一张图片的标题时，计算出要移走哪些图片
改变需要移走的图片的top值

下面再来仔细分析下一个实例中可能出现的情况。
当第1张显示时：

如果鼠标指向第2张标题，则移走前1张；
如果鼠标指向第3张标题，则移走前2张；
如果鼠标指向第4张标题，则移走前3张；
反过来，当第4张显示时：
如果鼠标指向第3张标题，则移走第3张；
如果鼠标指向第2张标题，则移走第2、3张；
如果鼠标指向第1张标题，则移走第1、2、3张；
当显示第2或第3张时，与上面两个边界情况类似。
规律就是：
如果指向的图片次序大于当前显示图片的次序，则上移当前以及它前面的图片；如果指向的图片的次序小于当前显示图片的次序，则下移它后面的图片。
第4张，也就是最下面那张其实是不会动的。

三、代码

HTML结构
<ul class="accd">
<li>
<img src="photo/c_04.jpg" />
<div>
<p class="t_04 s_02">Lorem</p>
<p class="d_02 s_02">consectetuer adipiscing elit</p>
<span>1</span>
</div>
</li>
<li>
<img src="photo/c_04.jpg" />
<div>
<p class="t_04 s_02">Claritas</p>
<p class="d_02 s_02">congue nihil imperdiet doming id</p>
<span>2</span>
</div>
</li>
<li>
<img src="photo/c_04.jpg" />
<div>
<p class="t_04 s_02">Eodem</p>
<p class="d_02 s_02">qui nunc nobis videntur parum </p>
<span>3</span>
</div>
</li>
<li>
<img src="photo/c_04.jpg" />
<div>
<p class="t_04 s_02">Typi</p>
<p class="d_02 s_02">placerat facer possim assum</p>
<span>4</span>
</div>
</li>
</ul>
CSS
.accd{
height:655px;
overflow:hidden;
position:relative;
width:250px;
}
.accd li{
position:absolute;
overflow:hidden;
height:464px;
width:250px;
z-index:0;
}
.accd li div{
position:absolute;
bottom:0;
left:0;
width:250px;
height:64px;
background:rgba(0,0,0,0.5);
color:white;
}
.accd li.on{
height:464px;
}

JS
首先定义高度和初始化各项图片，并给第一张加上on，以表示当前显示图片。

 $(function() {

     //define init shrink height and extn height
     var shrink_height = 64,
         extend_height = 464;

     //the accd container
     var $acc = $(".accd");

     //the accd items
     var $acc_item = $acc.find("li");

     //set the first item as the current
     $acc_item.first().addClass("on");

     //set the height of the acc container
     $acc.css({
         height: $acc_item.length * shrink_height + extend_height
     });

     //init each accd item height and z-index
     $acc_item.each(function(i, v) {

         //init item state
         var $that = $(this);

         //calc the top value of each item
         var idx = $(this).index();
         var t = idx * shrink_height;

         //set the initiate top value and z-index to each item 
         $(this).css({
             top: t,
             'z-index': ($acc_item.length - idx)
         });

         //bind event listener to mouse over
         $(this).mouseenter(function() {

             //get the current item idx
             var i = $(this).index();
             var i_on = $(".on").index();

             //make sure that only move the items that are not on the current stage
             if (!$that.hasClass("on")) {

                 //change on class
                 $(this).addClass("on").siblings().removeClass("on");

                 /*
                  * calculate which items to move
                  */
                 var diff = (i - i_on);
                 if (diff > 0) {
                     accUp(i_on, diff);
                 } else if (diff < 0) {
                     accDown(i, Math.abs(diff));
                 }
             }

         });
     });

     //move up the acc items
     function accUp(i, count) {
         var $item = $($acc_item.get().splice(i, count));
         $item.each(function(i, v) {
             $(v).animate({
                 top: '-=400'
             }, 100);
         });
     }

     //move down the acc items
     function accDown(i, count) {
         var $item = $($acc_item.get().splice(i, count));
         $item.each(function(i, v) {
             $(v).animate({
                 top: '+=400'
             }, 100);
         });
     }
 });

其中accUp和accDown为向上和向下移动一定数量的图片，需要注意的是：如果向上移动需要从on那一张往前算起；而想下移动则需要从鼠标指向的的那一张向下开始算起。