javascript多物體運動實現方法分析，javascript物體

javascript多物體運動實現方法分析，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>