推拉门效果图

var li_list = document.querySelectorAll('ul li');
//初始时的排版，每个向后移动50px
for (var i = 0; i < li_list.length; i++) {
  if (i > 0) {
    li_list[i].style = 'left:' + (50 * i) + 'px';
  }
}

for (var j = 0; j < li_list.length; j++) {
  li_list[j].index = j;
  li_list[j].addEventListener('mouseover', function () {
    var ind = this.index; //当前划上去的下标
    for (var i = 0; i < li_list.length; i++) {
      if (i > ind) { //当前下标后面的所有图片
        li_list[i].style = 'left:' + (500 + (50 * (i - 1))) + 'px;'
      } else { //当前下标前面的所有图片
        li_list[i].style = 'left:' + (50 * i) + 'px;'
      }
    }
  })
}

image.png