js手风琴动画效果

首先设置好html和css的样式,如下:

html代码 :

<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

css样式 : 

<style>

  ul {
    list-style: none;
  }

  * {
    margin: 0;
    padding: 0;
  }

  div {
    width: 1150px;
    height: 400px;
    margin: 50px auto;
    border: 1px solid red;
    overflow: hidden;
  }

  div li {
    width: 240px;
    height: 400px;
    float: left;
  }

  div ul {
    width: 1300px;
  }

js代码如下 : 

<script>
      var list = f("box").getElementsByTagName("li");  //获取li
      //给每个li设置背景图片,鼠标移入移出事件
      for (var i=0;i<list.length;i++){
          list[i].style.backgroundImage = "url(images/" + (i+1) + ".jpg";

          list[i].onmouseover = mouseoverHandle;  //调用鼠标移入事件
          list[i].onmouseout = mouseoutHandle;//调用鼠标移出事件

      }

      //鼠标移入事件
      function mouseoverHandle() {
          for (var j = 0; j < list.length; j++) {
              animate(list[j], {"width": 100});//动画效果
          }
          animate(this, {"width": 800});
          this.style.backgroundSize = "100% 100%";
      }
      //鼠标移出事件
      function mouseoutHandle() {
          for (var j = 0; j < list.length; j++) {
              animate(list[j], {"width": 240});//动画效果
          }
          this.style.backgroundSize = "";
      }



</script>

效果图如下 : 

点击效果图如下 :