推拉门是网页中常见的一种形式''推拉门''动效也可以称作"手风琴"效果，通过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中比较好玩的案例，感兴趣可以试一下
