（43）JS運動之鏈式運動框架
阿新 • • 發佈：2019-01-10
鏈式運動框架就是一系列的運動分階段進行，在普通的運動框架上加上一個引數function，這個function表示下一個要執行的動作，具體程式碼如下：
效果圖：<!DOCTYPE HTML> <!--鏈式運動框架：運動分階段進行，當運動停止的時候，執行下一個運動--> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1 {width:100px;height:100px;background:red;filter:alpha(opacity:30);opacity:0.3} </style> <script> window.onload=function () { var oDiv=document.getElementById('div1');//先獲取div元素 oDiv.onmouseover=function () { startMove(oDiv,'width',300,function(){//先是寬變300 startMove(oDiv,'height',300,function(){//當寬變300的時候，即運動結束時候開啟另一個運動，使其高變為300 startMove(oDiv,'opacity',100);//使透明度變成100，原來是30 }); }); }; oDiv.onmouseout=function ()//當滑鼠移出的時候，跟移進的時候效果相反即可。 { startMove(oDiv,'opacity',30,function(){ startMove(oDiv,'height',100,function(){ startMove(oDiv,'width',100); }); }); }; };//以下是運動框架的內容 function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } function startMove(obj, attr, iTarget, fnEnd)//比普通的運動框架寫多了一個函式，說明下一階段要執行的運動 { clearInterval(obj.timer); obj.timer=setInterval(function (){ var cur=0; if(attr=='opacity') { cur=Math.round(parseFloat(getStyle(obj, attr))*100); } else { cur=parseInt(getStyle(obj, attr)); } var speed=(iTarget-cur)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget) { clearInterval(obj.timer); if(fnEnd)fnEnd(); } else { if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100; } else { obj.style[attr]=cur+speed+'px'; } } }, 30); } </script> </head> <body> <div id="div1"></div> </body> </html>
當滑鼠移進的時候，先橫向變寬，再縱向變高，最後透明度變成100，效果如下：
當滑鼠移出的時候，效果剛好和上面相反：
