滑动门效果

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

1<  堆叠

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

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

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

2< offsetWidth,width,clientWidth的区别

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

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

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

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

3<  单位的问题 

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

4<  核心代码

/**  * Created by Administrator on 2016/7/23.  */ window.onload = function(){
    //获取容器  var context = document.getElementById("container");

    //获取所有图片  var imgArr = context.getElementsByTagName("img");

    //图片的宽度  var imgWidth = imgArr[0].offsetWidth;

    //设置被隐藏后的图片的width  var showWidth = 160;

    //滑动时需要移动的距离  var translate = imgWidth - showWidth;

    //设置容器的长度  var boxWidth = imgWidth + (imgArr.length-1)*showWidth;
    context.style.width = boxWidth + 'px';

    //设置每张图片的位置  function setPosition(){
        for( var i = 1; i < imgArr.length; i++){
            imgArr[i].style.left = imgWidth + (i-1)*showWidth + 'px';
        }
    }
   setPosition();

    for(var i = 0;i < imgArr.length; i++){
        (function(i){
            imgArr[i].onmouseover = function(){
                //先将每道门复位  setPosition();

                //先将门打开  for(var j = 1;j <= i; j++){
                    imgArr[j].style.left = parseInt(imgArr[j].style.left, 10) - translate + 'px';
                }
            };
        })(i);
    }

};

今天的文章滑动门效果分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。