滑动门特效和手风琴效果有些相似,来实现一下这个效果吧,先介绍一下这个效果中涉及的需要了解的知识点。
1< 堆叠
方法:滑动门效果中,有堆叠效果布局,一说到堆叠布局,脑中马上蹦出来的两个方法,一个是z-index,另一个就是定位。
实现:z-indx通过改变数值的大小,进行堆叠布局。
定位主要用到相对定位和绝对定位,所有的子元素相对于父元素进行定位,通过js或者css控制子元素的位置。
2< offsetWidth,width,clientWidth的区别
相同点:它们都是返回宽度。
不同点:width只包括宽度,不包括内外边距和边框。
offsetWidth包括宽度,内边距和边框但不包括外边距。
clientWidth包括宽度和内边 距,但不包括外边距和边框。
3< 单位的问题
ps:在用js设置width,需要加px单位,设置offsetWidth和clientWidth,直接赋值数字就行。
4< 核心代码
<