一、需求

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

效果图

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

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

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

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

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

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

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

三、代码

1. 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>

2. 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;
   }

3. 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那一张往前算起；而想下移动则需要从鼠标指向的的那一张向下开始算起。