滑动门效果

滑动门特效和手风琴效果有些相似，来实现一下这个效果吧，先介绍一下这个效果中涉及的需要了解的知识点。

1<  堆叠

方法：滑动门效果中，有堆叠效果布局，一说到堆叠布局，脑中马上蹦出来的两个方法，一个是z-index,另一个就是定位。

实现：z-indx通过改变数值的大小，进行堆叠布局。

    定位主要用到相对定位和绝对定位，所有的子元素相对于父元素进行定位，通过js或者css控制子元素的位置。

2< offsetWidth,width,clientWidth的区别

相同点：它们都是返回宽度。

不同点：width只包括宽度，不包括内外边距和边框。

offsetWidth包括宽度，内边距和边框但不包括外边距。

clientWidth包括宽度和内边 距，但不包括外边距和边框。

3<  单位的问题 

ps:在用js设置width，需要加px单位，设置offsetWidth和clientWidth，直接赋值数字就行。

4<  核心代码

<