DIV CSS 佈局教程網

本文實例分析了js實現的多個物體運動功能。分享給大家供大家參考，具體如下：

與單個的區別：得知道哪個在動，所以運動函數需要兩個參數，出了目標iTarget之外，還要obj。另外需要多個計數器，否則當一個還沒運動完就移入另一個物體會發生卡殼

window.onload=function(){
  var aDiv=document.getElementsByTagName("div");
  var timer=null;
  var i;
  for(i=0;i<aDiv.length;i++){
    aDiv[i].timer=null;
    aDiv[i].onmouseover=function(){
      startMove(this,300);
    };
    aDiv[i].onmouseout=function(){
      startMove(this,100);
    };
  }
  function startMove(obj,iTarget){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
      var iSpeed=(iTarget-obj.offsetWidth)/8;
      iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);  //凡是要用緩沖運動，肯定缺不了取整，為了讓他能到目的點（不然無法完全貼合）
      if(obj.offsetWidth==iTarget){
        clearInterval(obj.timer);
      }
      else{
        obj.style.width=obj.offsetWidth+iSpeed+'px';
      }
    },30);
  };
};

注：多物體運動，所有東西都不能公用

屬性與運動對象綁定：速度、其他屬性值（如透明度等）

offsetWidth、offsetHeight、offsetLeft、offsetHeight都有一個bug，拿offsetWidth舉例，他除了width還包括padding和border，比如div寬度為100，還有一像素邊框，現在讓div運動，div.style.width=div.offsetWidth-1+'px'，沒有邊框的的情況下他會一直縮小直到消失，有邊框的情況。width:100px,offsetWidth:102px >>>>>width:101px,offsetWidth:103px，會使得他不斷變大

解決辦法：

用 currentStyle  div.style.width=parseInt(getStyle(div,'width'))-1+'px'   getStyle是自己封裝好的獲取樣式的函數，裡面包括currentStyle方法。parseInt解析字符串返回整數。

擴展(任意值變化)：

用同一套運動框架使得一個物體變寬，一個變高，一一個透明度變化

window.onload=function(){
  var aDiv=document.getElementsByTagName("div");
  var timer=null;
  aDiv[0].onmouseover=function(){
    startMove(this,'width',300);
  };
  aDiv[0].onmouseout=function(){
    startMove(this,'width',100);
  };
  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=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{
        obj.style[attr]=iCur+iSpeed+'px';
      }
    },30);
  };
};

這套運動框架還有個問題，透明度沒支持

1.

var iCur=parseInt(getStyle(obj,attr));

opacity取到的都是零點幾，parseInt取整，所以opacity永遠是0，應改為

if(attr=='opacity'){
  var iCur=parseFloat(getStyle(obj,attr))*100;  //為了其他程序不用修改，這裡統一乘100
}
else{
  var iCur=parseInt(getStyle(obj,attr));
}

2.

obj.style[attr]=iCur+iSpeed+'px';

按現在寫法就是

aDiv.style.opacity=50px;

應改為

if(attr=='opacity'){
  obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
  obj.style.opacity=(iCur+iSpeed)/100;
}
else{
  obj.style[attr]=iCur+iSpeed+'px'
}

3.計算機內部，都是模擬的來存儲小數，不是實際來存儲，最簡單的例子

alert(0.07*100);  //輸出並不是7，而是7.0000...001，不止7，很多數字（小數）都有問題

所以var iCur=parseFloat(getStyle(obj,attr))*100;就會出問題（會閃爍），解決方法就是避免使用小數

var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);

更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。