手风琴特效

可以先看下效果：鼠标移上去之后图片会展开，移到上面的照片会遮住下面的图片

其实大体的原理是就是，让他们的宽度和长度一样，鼠标移动上之后，鼠标所在的图片拉长，并且将下面的图片遮住，依次这样轮番

具体的逻辑就是先找到这些图片信息，然后给个事件鼠标移上或是移除就改变图片的长度

（1）先建个div放这些图片

<div id="box">   <!--外面的框架-->
    <ul>
        <li><img src="l1.jpg" /></li>  <!--图片-->
        <li><img src="l2.jpg" /></li>
        <li><img src="l3.jpg" /></li>
        <li><img src="l4.jpg"/></li>
        <li><img src="l5.jpg"/></li>
    </ul>
</div>

（2）给这些div编写样式

<style type="text/css">
    *{
        margin:0px auto;
        padding:0px;
    }
    ul {
        list-style: none;  /*去掉前面的点*/
    }
    div {
        width: 1110px;   /*div的长宽高，还有超出隐藏*/
        height: 400px;
        margin: 50px auto;
        border: 1px solid red;
        overflow: hidden;
    }
    div li {
        width: 240px;
        height: 400px;
        float: left;  <br>　　}
    div li img{
    height:400px;
        }
    div ul {
        width: 1300px;
    }
</style>    

（3）js代码

<script type="text/javascript">
    //找人
    var box = document.getElementById("box");
    var ul = box.children[0];
    var lis = ul.children;
      
    //循环遍历 lis 绑定背景图
      
    for (var i = 0; i < lis.length; i++) {
          //给每一个li注册鼠标经过事件 鼠标经过后要排他
          lis[i].onmouseover = function () {
      
            //干掉所有人 让所有人的宽度 渐渐地 变为100
          
            for (var j = 0; j < lis.length; j++) {
              animate(lis[j], {"width": 100});
            }
      
            //留下我自己 让我的宽度 渐渐地 变为800
          
            animate(this, {"width": 710});
          };
    }
      
    //鼠标离开box 所有的li宽度 渐渐地 变为240
      
    box.onmouseout = function () {
      for (var i = 0; i < lis.length; i++) {
        animate(lis[i], {"width": 240});
      }
    };
      
    //jQuery中有animate动画函数，下面是实现的原理，虽然没有jQ的强大，但是基本的效果实现还是没有问题的
      
    function animate(obj, json) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
      
        //先假设 这一次执行完 所有的属性都到达目标了
      
        var flag = true;
        for (var k in json) {
          var leader = parseInt(getStyle(obj, k)) || 0;
          var target = json[k];
          var step = (target - leader) / 10;  //位置
          step = step > 0 ? Math.ceil(step) : Math.floor(step); 
          leader = leader + step;
          obj.style[k] = leader + "px";
          
          console.log("代码还在运行");
          if (leader != target) {
      
            flag = false;//告诉标记 当前这个属性还没到达
      
          }
        }
      
        //如果此时仍然为true 就说明真的都到达了
      
        if (flag) {
          clearInterval(obj.timer);
        }
      }, 15);
    }
      
    //全部属性都到达目标值才能清空
      
    function getStyle(obj, attr) {
      if (window.getComputedStyle) {   //获得全部的style样式
          console.log(window.getComputedStyle(obj, null));
        return window.getComputedStyle(obj, null)[attr];
         
      } else {
        return obj.currentStyle[attr];
      }
    }
</script>

这样，手风琴特效就好了，js代码还是有不明白的地方，自己可以在屡一下