欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js多個(gè)物體運(yùn)動(dòng)功能實(shí)例分析

 更新時(shí)間：2016年12月20日 11:10:42   作者：鬼畜十三  
這篇文章主要介紹了js多個(gè)物體運(yùn)動(dòng)功能,結(jié)合實(shí)例形式分析了js實(shí)現(xiàn)多物體運(yùn)動(dòng)功能的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例分析了js實(shí)現(xiàn)的多個(gè)物體運(yùn)動(dòng)功能。分享給大家供大家參考，具體如下：

與單個(gè)的區(qū)別：得知道哪個(gè)在動(dòng)，所以運(yùn)動(dòng)函數(shù)需要兩個(gè)參數(shù)，出了目標(biāo)iTarget之外，還要obj。另外需要多個(gè)計(jì)數(shù)器，否則當(dāng)一個(gè)還沒運(yùn)動(dòng)完就移入另一個(gè)物體會(huì)發(fā)生卡殼

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);  //凡是要用緩沖運(yùn)動(dòng)，肯定缺不了取整，為了讓他能到目的點(diǎn)（不然無法完全貼合）
      if(obj.offsetWidth==iTarget){
        clearInterval(obj.timer);
      }
      else{
        obj.style.width=obj.offsetWidth+iSpeed+'px';
      }
    },30);
  };
};

注：多物體運(yùn)動(dòng)，所有東西都不能公用

屬性與運(yùn)動(dòng)對象綁定：速度、其他屬性值（如透明度等）

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

解決辦法：

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

擴(kuò)展(任意值變化)：

用同一套運(yùn)動(dòng)框架使得一個(gè)物體變寬，一個(gè)變高，一一個(gè)透明度變化

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);  //凡是要用緩沖運(yùn)動(dòng)，肯定缺不了取整，為了讓他能到目的點(diǎn)（不然無法完全貼合）
      if(iCur==iTarget){
        clearInterval(obj.timer);
      }
      else{
        obj.style[attr]=iCur+iSpeed+'px';
      }
    },30);
  };
};

這套運(yùn)動(dòng)框架還有個(gè)問題，透明度沒支持

1.

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

opacity取到的都是零點(diǎn)幾，parseInt取整，所以opacity永遠(yuǎn)是0，應(yīng)改為

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

2.

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

按現(xiàn)在寫法就是

aDiv.style.opacity=50px;

應(yīng)改為

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

3.計(jì)算機(jī)內(nèi)部，都是模擬的來存儲(chǔ)小數(shù)，不是實(shí)際來存儲(chǔ)，最簡單的例子

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

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

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論