本文實例講述了javascript多物體運動實現方法。分享給大家供大家參考，具體如下：
這里需要注意：每個運動物體的定時器作為物體的屬性獨立出來互不影響，屬性與運動對象綁定，不能公用。
運行效果截圖如下：
例子：
<!doctype html><html><head><meta charset="utf-8"><title>多物體運動</title><style>div{ width:100px; height:100px; background:red; float:left; margin:10px; border:1px solid black; opacity:0.3; filter:alpha(opacity=30);}</style><script>window.onload = function(){ var aDiv = document.getElementsByTagName('div'); aDiv[0].onmouseover = function() { startMove(this, 'width', 300); }; aDiv[0].onmouseout = function() { startMove(this, 'width', 100); }; aDiv[1].onmouseover = function() { startMove(this, 'height', 300); }; aDiv[1].onmouseout = function() { startMove(this, 'height', 100); }; aDiv[2].onmouseover = function() { startMove(this, 'opacity', 100); }; aDiv[2].onmouseout = function() { startMove(this, 'opacity', 30); }; aDiv[3].onmouseover = function() { startMove(this, 'borderWidth', 20); }; aDiv[3].onmouseout = function() { startMove(this, 'borderWidth', 1); };};function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; }}function startMove(obj, attr, iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var iCur = 0; if(attr == 'opacity'){ iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100); }else{ iCur = parseInt(getStyle(obj, attr)); } var iSpeed = (iTarget - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(iCur == iTarget){ clearInterval(obj.timer); }else{ if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity='+ (iCur+iSpeed) +')'; obj.style.opacity = (iCur+iSpeed)/100; }else{ obj.style[attr] = iCur + iSpeed + 'px'; } } }, 30);}</script></head><body><div></div><div></div><div></div><div></div></body></html>更多關于JavaScript運動效果相關內容可查看本站專題：《JavaScript運動效果與技巧匯總》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
