手风琴特效

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

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

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

1
2
3
4
5
6
7
8
9
<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编写样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
    *{
        margin:0px auto;
        padding:0px;
    }
    ul {
        list-style: none;  /*去掉前面的点*/
    }
    div {
        width: 1150px;   /*div的长宽高，还有超出隐藏*/
        height: 400px;
        margin: 50px auto;
        border: 1px solid red;
        overflow: hidden;
    }
    div li {
        width: 240px;
        height: 400px;
        float: left;  <br>　　}
    div ul {
        width: 1300px;
    }
</style>
（3）js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<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": 800});
          };
    }
      
    //鼠标离开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代码还是有不明白的地方，自己可以在屡一下　　

　　

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

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

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

1 2 3 4 5 6 7 8 9

<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编写样式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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

（3）js代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

<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": 800});           };     }            //鼠标离开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代码还是有不明白的地方，自己可以在屡一下