本篇內(nèi)容介紹了“分享JavaScript運(yùn)動(dòng)框架”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、東興網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為東興等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

JavaScript的運(yùn)動(dòng)，即讓某元素的某些屬性由一個(gè)值變到另一個(gè)值的過程。如讓div的width屬性由200px變到400px，opacity屬性由0.3變到1.0，就是一個(gè)運(yùn)動(dòng)過程。

實(shí)現(xiàn)運(yùn)動(dòng)要注意以下方面：

1. 勻速運(yùn)動(dòng)（改變left、right、width、height、opacity等屬性）

2. 緩沖運(yùn)動(dòng)（速度是變化的）

3. 多物體運(yùn)動(dòng)（注意所有東西都不能共用，否則容易產(chǎn)生沖突，如定時(shí)器timer）

4. 獲取任意屬性值（封裝一個(gè)getStyle函數(shù)）

5. 鏈?zhǔn)竭\(yùn)動(dòng)（串行）

6. 同時(shí)運(yùn)動(dòng)（并行，同時(shí)改變多個(gè)屬性，需要使用 json）

封裝好的getStyle函數(shù)，在下面的運(yùn)動(dòng)框架中會(huì)用到：

function getStyle(obj,attr){

if(obj.currentStyle){

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

}

else{

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

}

}

萬能的運(yùn)動(dòng)框架：

function Move(obj,json,callback){

var flag=true; //標(biāo)志變量，為true表示所有運(yùn)動(dòng)都到達(dá)目標(biāo)值

clearInterval(obj.timer);

obj.timer=setInterval(function(){

flag=true;

for(var attr in json){

//獲取當(dāng)前值

var curr=0;

if(attr=='opacity'){

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

}

else{

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

}

//計(jì)算速度

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

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

//檢測是否停止

if(curr!=json[attr]){

flag=false; //有一個(gè)屬性未達(dá)目標(biāo)值，就把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);

}

調(diào)用上述運(yùn)動(dòng)框架的實(shí)例：

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運(yùn)動(dòng)框架”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

本文名稱：分享JavaScript運(yùn)動(dòng)框架-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://m.2m8n56k.cn/article6/dodpog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、定制網(wǎng)站、Google、網(wǎng)站設(shè)計(jì)、定制開發(fā)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)