javascript多物体运动实现方法分析

本文实例讲述了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程序设计有所帮助。