js运动：多div变宽、二级菜单

定时器及运动函数。

多div变宽：

<!--
Author: XiaoWen
Create a file: 2016-12-13 09:36:30
Last modified: 2016-12-13 12:24:18
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js多div变宽</title>
  <style>
    div{
      width: 100px;
      height: 40px;
      background: #f00;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
  var a_div=document.getElementsByTagName('div');
  console.log(a_div)
  var timer=null;
  for(var i=0;i<a_div.length;i++){
    a_div[i].onmouseover=function(){
      startMove(this,400);
    };
    a_div[i].onmouseout=function(){
      startMove(this,100);
    };
  };
  function getStyle(obj,attr){
    if(obj.currentStyle){
      return obj.currentStyle[attr];
    }else{
      return getComputedStyle(obj)[attr];
    };
  };
  var speed;
  function startMove(obj,iTarget){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
      //当目标比自身小时向上，当目标比自身大时向下
      //当目标比较大时，会一直加，如果不向上取会少加
      //当目标比较小时，会一直减，如果不向上取会少减

      //不怕多加，也不怕多减，因为只要到达目标值都会结束运行。
      //多加时是正数，向上取才能多
      //多减时是负数，向下取才能让负数更大
      var speed=(iTarget-parseInt(getStyle(obj,'width')))/8;
      if(speed<0){
        speed=Math.floor(speed);
      }else{
        speed=Math.ceil(speed);
      };
      if(parseInt(getStyle(obj,'width'))==iTarget){
        clearInterval(obj.timer);
      }else{
        obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';
      };
    },10);
  };
</script>
</body>
</html>

二级菜单：

二级菜单

<!--
Author: XiaoWen
Create a file: 2016-12-13 09:36:30
Last modified: 2016-12-13 16:29:44
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js多div变宽</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #tag{
      height: 40px;
      background: #ccc;
    }
    ul,li{
      list-style: none;
    }
    #tag li{
      width: 150px;
      height: 40px;
      float: left;
      background: #ddd;
      position: relative;
      overflow: hidden;
    }
    #tag li a{
      display: block;
      width: 150px;
      height: 40px;
    }
    #tag li div{
      width: 150px;
      height: 400px;
      background: #eee;
    }
  </style>
</head>
<body>
<div id="box">
  <div id="tag">
    <ul>
      <li>
        <a href="#">1</a>
        <div>11</div>
      </li>
      <li>
        <a href="#">2</a>
        <div>22</div>
      </li>
      <li>
        <a href="#">3</a>
        <div>33</div>
      </li>
      <li>
        <a href="#">4</a>
        <div>44</div>
      </li>
      <li>
        <a href="#">5</a>
        <div>55</div>
      </li>
      <li>
        <a href="#">6</a>
        <div>66</div>
      </li>
    </ul>
  </div>
</div>
<script>
 var cont=document.getElementById('tag');
  var a_li=cont.getElementsByTagName('li');
  var a_div=cont.getElementsByTagName('div');
  var timer=null;
  for(var i=0;i<a_li.length;i++){
    a_li[i].onmouseover=function(){
      startMove(this,'height',400);
    };
    a_li[i].onmouseout=function(){
      startMove(this,'height',40);
    };
  };
  function startMove(obj,attr,iTarget){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
      var speed=(iTarget-parseInt(getStyle(obj,attr)))/8;
      var speed=speed>0? Math.ceil(speed) : Math.floor(speed);
      if(speed==iTarget){
        clearInterval(obj.timer);
      }else{
        obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px';
      };
    },50);
  };
  function getStyle(obj,attr){
    if(obj.currentStyle){
      return obj.currentStyle[attr];
    }else{
      return getComputedStyle(obj)[attr];
    }
  }
</script>
</body>
</html>