JS之推拉门案例

推拉门是网页中常见的一种形式''推拉门''动效也可以称作"手风琴"效果，通过JS实现比较简单。主要是通过getElement找到节点元素，然后对其进行相应的赋值即可。下面我为大家讲解一下如何实现推拉门。

html样式

  <div class="box">
    <ul>
        <li><img src="../images的副本 2/imgs/timg (1).jpeg" alt=""></li>
        <li><img src="../images的副本 2/imgs/timg (2).jpeg" alt=""></li>
        <li><img src="../images的副本 2/imgs/timg (3).jpeg" alt=""></li>
        <li><img src="../images的副本 2/imgs/timg (4).jpeg" alt=""></li>
        <li><img src="../images的副本 2/imgs/timg (5).jpeg" alt=""></li>
        <li><img src="../images的副本 2/imgs/timg (6).jpeg" alt=""></li>

    </ul>
</div>

css样式

  * {
     margin: 0;
     padding: 0;
     list-style: none;
     }
   .box {
   width: 600px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid red;
   position: relative;
  }
  .box ul li {
 position: absolute;
 left: 0;
 float: left;
 top: 0;
 width: 600px;
height: 300px;
transition: 1s;
}
 .box ul li img {
 width: 600px;
 height: 300px;
 }

js样式

    var li = document.querySelectorAll("ul li ");//获取所有li
   //设置初始界面
    for (var i = 0; i < li.length; i++) {//循环遍历每个li
        li[i].style.left = ` ${i * 50}px`;//让每张图片距离左边都有50px的距离

    }
    for (var j = 0; j < li.length; j++) {//循环遍历每个图片
        li[j].ind = j;//保存下标
        li[j].onmouseover = function () {//给图片设置划过事件
            for (var i = 0; i < li.length; i++) {//循环遍历每个图片
                if (i <=this.ind) {//判断图片前面的下标
                    li[i].style.left = `${i * 50}px`//如果是在这张图片的前面或者当前图片，设置初始的left值
                } else {
                    li[i].style.left = `${50*(i-1)+300}px`//图片后面则设置图片的宽度加上在它前面的所有图片的left值

                }

            }
        }
    }

下面是我敲出来的效果

屏幕快照 2019-10-23 下午7.43.30.png

一共六张图片，只露出了一张图片，其他图片重叠起来，只露出一小部分，当我们划过每张图片时，它就会漏出来，其他所有图片还是重叠状态
看，当我们划过第三张图片漏出的部分的时候，第三张就会展示出来，其他所有的图片仍是重叠状态

屏幕快照 2019-10-23 下午7.44.16.png

这个是js中比较好玩的案例，感兴趣可以试一下