鏈式運動
阿新 • • 發佈：2018-12-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin:0; padding:0; } ul,li{ margin:0; padding:0; } ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background:yellow; margin-bottom: 20px; filter:alpha(opacity:30); opacity: 0.3; border:4px solid #000; } </style> <script type="text/javascript"> window.onload=function(){ var li1 = document.getElementById('li1'); li1.onmouseover = function(){ startMove(li1,'width',400,function(){ startMove(li1,'height',200,function(){ startMove(li1,'opacity',100) }) }); } li1.onmouseout = function(){ startMove(li1,'opacity',30,function(){ startMove(li1,'height',100,function(){ startMove(li1,'width',200) }) }); } } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } function startMove(obj,attr,target,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var icur=0; if(attr == 'opacity'){ var icur = parseFloat(getStyle(obj, attr))*100; }else{ var icur = parseInt(getStyle(obj, attr)); } var speed = (target-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur == target){ clearInterval(obj.timer); if(fn){ fn(); } }else{ if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur + speed+'px'; } } },30); } </script> </head> <body> <ul> <li id="li1"></li> </ul> </body> </html>
顧名思義，按著順序進行運動。新增一個函式引數，為下一步所要進行的運動。後面新增一個判定，若有引數傳入則執行。注意onmouseout的運動順序（與onmouseover相反）。另此處this問題，若obj的引數為this，則從第二個開始無效。