分享JavaScript運動框架

本篇內容介紹了“分享JavaScript運動框架”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

JavaScript的運動，即讓某元素的某些屬性由一個值變到另一個值的過程。如讓div的width屬性由200px變到400px，opacity屬性由0.3變到1.0，就是一個運動過程。

實現運動要注意以下方面：

1. 勻速運動（改變left、right、width、height、opacity等屬性）

2. 緩沖運動（速度是變化的）

3. 多物體運動（注意所有東西都不能共用，否則容易產生沖突，如定時器timer）

4. 獲取任意屬性值（封裝一個getStyle函數）

5. 鏈式運動（串行）

6. 同時運動（并行，同時改變多個屬性，需要使用 json）

封裝好的getStyle函數，在下面的運動框架中會用到：

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr]; //針對IE

}

else{

return getComputedStyle(obj,false)[attr]; //針對Firefox

}

}

萬能的運動框架：

function Move(obj,json,callback){

var flag=true; //標志變量，為true表示所有運動都到達目標值

clearInterval(obj.timer);

obj.timer=setInterval(function(){

flag=true;

for(var attr in json){

//獲取當前值

var curr=0;

if(attr=='opacity'){

curr=Math.round(parseFloat(getStyle(obj,attr))*100); //parseFloat可解析字符串返回浮點數//round四舍五入

}

else{

curr=parseInt(getStyle(obj,attr)); //parseInt可解析字符串返回整數

}

//計算速度

var speed=(json[attr]-curr)/10;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

//檢測是否停止

if(curr!=json[attr]){

flag=false; //有一個屬性未達目標值，就把flag變成false

}

if(attr=='opacity'){

obj.style.filter='alpha(opacity:'+(curr+speed)+')'; //針對IE

obj.style.opacity=(curr+speed)/100; //針對Firefox和Chrome

}

else{

obj.style[attr]=curr+speed+'px';

}

}

if(flag){

clearInterval(obj.timer);

if(callback){

callback();

}

}

},30);

}

調用上述運動框架的實例：

var div_icon=document.getElementById('icon');

var aList=div_icon.getElementsByTagName('a');

for(var i=0;i<aList.length;i++){

<span style="white-space:pre">        </span>aList[i].onmouseover=function(){

<span style="white-space:pre">         </span>var _this=this.getElementsByTagName('i')[0];

<span style="white-space:pre">         </span>Move(_this,{top:-70,opacity:0},function(){

<span style="white-space:pre">         </span>_this.style.top=30+'px';

<span style="white-space:pre">         </span>Move(_this,{top:10,opacity:100});

<span style="white-space:pre">         </span>});

<span style="white-space:pre">        </span>}

}

“分享JavaScript運動框架”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！