定时器及运动函数。
多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>