如何制作一个Accordion组件

96
codemarker
2015.08.28 18:22* 字数 1073

一、需求

最近一个项目中需要用到一个类似手风琴的效果,我立刻想到网上各种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那一张往前算起;而想下移动则需要从鼠标指向的的那一张向下开始算起。

Javascript
Web note ad 1