JS实现动画特效4（实现手风琴特效1）

代码

实现效果

HTML

 <!-- 手风琴特效S -->
    <div class="accordion_box">
      <h3>手风琴特效</h3>
      <ul>
        <li class="accordion_box_li"></li>
        <li class="accordion_box_li"></li>
        <li class="accordion_box_li"></li>
        <li class="accordion_box_li"></li>
        <li class="accordion_box_li"></li>
      </ul>
    </div>

    <!-- 手风琴特效E -->

CSS

/* 手风琴特效S */
.accordion_box {
  width: 1150px;
  height: 600px;
  margin-top: 150px;
}

.accordion_box ul {
  width: 1300px;
  overflow: hidden;
}


.accordion_box ul li {
  width: 240px;
  height: 400px;
  float: left;
}

/* 手风琴特效E */

JS

//手风琴特效S

var accordion_box = document.getElementById("accordion_box");
var lis = document.getElementsByClassName("accordion_box_li");
console.log(lis);
// 动态添加背景图
for (var i = 0; i < lis.length; i++) {
  lis[i].style.backgroundImage = "url(/img/" + (i + 1) + ".jpg )";

  // 鼠标经过后，当前li得宽度变为800，其他为100
  lis[i].onmouseover = function () {
    for (var j = 0; j < lis.length; j++) {
      slowGo_animate(lis[j], { width: 100 });
    }
    slowGo_animate(this, { width: 800 });
  };
}

// 离开后，所有li宽度变回240
accordion_box.onmouseout = function () {
  for (var i = 0; i > lis.length; i++) {
    slowGo_animate(lis[i], { width: 240 });
  }
};

//手风琴特效E