一步步教你css3手风琴效果的实现

什么是手风琴效果？

　　首先我们先来看一段动画，如下图所示：

在上面动画中，我们不难发现，一排照片正常排列，当我鼠标移上(：hover)时，照片会变大显示并且把其它照片挤小。那么在鼠标来回移动的过程中，画面正常显示的效果类似我们的手风琴，所以叫手风琴效果。

手风琴效果的实现

把图片显示出来

通过上面的效果，我们不难发现，首先所有照片的集合是一个有1px边框的div盒子，盒子里面有一组ul li ，每个li标签里面有一张照片，那么我们首先把这段代码实现，html代码如下

<div class="box">
    <ul>
        <li><img src="data:images/01.jpg" alt=""></li>
        <li><img src="data:images/02.jpg" alt=""></li>
        <li><img src="data:images/03.jpg" alt=""></li>
        <li><img src="data:images/04.jpg" alt=""></li>
        <li><img src="data:images/05.jpg" alt=""></li>
        <li><img src="data:images/06.jpg" alt=""></li>
    </ul>
</div>

css代码如下：

*{
            margin:;
            padding:;
            border:;
            list-style: none;
        }
        .box{
            width: 1200px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .box ul{
            overflow: hidden;
        }
        .box ul li{
            float: left;
            width: 200px;
            height: 300px;
            transition: all 1s;
        }
 

鼠标移上事件

接下来我们完成鼠标移上事件的代码。从上面的动画中我们不难发现，鼠标移上一共有3个效果；1、鼠标移上的那个li的宽度变大 2、其它li的宽度变小 3、移上两个效果的变化是逐渐完成的。首先我们想：第一个效果的话，是不是li：hover{width：XXXpx;}就可以实现了。那么第二个效果呢？我们是不是可以理解为鼠标移动到div上之后，div里面所有li的宽度都变小了，那代码实现为.box:hover li{width: XXXpx;}即可实现。第三个效果是不是可以使用css3中的trantation属性来实现？那么完整的代码如下

   .box ul li{
            transition: all 1s;
        }
        .box:hover li{
            width: 150px;
        }
        .box ul li:hover{
            width: 500px;
        }

看效果调BUG

那么完成上述代码，我们是不是就完成了手风琴效果了呢？我们不妨来看看效果，运行代码，效果如下：

　　在上述效果中，我们发现当鼠标移动到右边数第二张照片的时候，最右边的照片显示不出来，这是为什么呢？我们来分析一下：上文中鼠标移上之后，我每张照片设置的宽度为150px，鼠标移上的那张照片为500px；150*5+500=1250，大于我们设置的1200的总宽度。由于ul上文中没有给它设置宽度，所以它默认的最大宽度为1200，所以没有足够的宽度让它来显示所有的照片，所以最后一张照片没有显示出来。那么我给ul的宽度设置的大一点可以吗？当然可以，保险起见，我给ul的宽度设置为9999px，那么有人会问了，ul这么宽，会超过div的宽度，这么办？放心，div给它设置一个overflow：hidden属性，超出隐藏即可。增加的代码如下：

.box{
            overflow: hidden;
        }
        .box ul{
            width: 9999px;
        }

　　运行程序，完美实，但是gif太大，上传不了，最后还是放弃。有兴趣的同学可以自己试着写一下，然后看看效果。

总结

前面也写了几篇博客，但是每次都忘记总结一下在工作中实现一个功能的步骤，那在这里总结一下吧。

分析需求

首先我们拿到需求之后，我们不要急着去coding，而是先分析清楚我们的需求是什么，我们在实现这个需求的时候使用可以用到哪些标签，哪些样式，哪些js行为，哪些api等内容。

分步骤实现

分析完需求之后，我们按照分析的需求，一步一步实现代码。先搭建html标签，写css样式……在写的过程中，一步一步看看写的样式，js行为有没有起作用，确保上一条代码起作用之后再写下一条代码。

测试解决bug

所有的功能实现之后，我们来系统的测试一下完成的模块，看和需求有没有出入，有没有BUG，如果有BUG解决BUG，如果没有，那么，恭喜你，可以提交你的代码到测试部门了。