真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

JavaScript運動框架之多值運動的示例分析

這篇文章主要介紹JavaScript運動框架之多值運動的示例分析,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),贛州企業(yè)網(wǎng)站建設(shè),贛州品牌網(wǎng)站建設(shè),網(wǎng)站定制,贛州網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,贛州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

多值運動,也就是對于某個對象來說,不僅僅只是其中一個屬性值在變化,而是好多個,比如寬,高,字體,透明度等等同時變化

當(dāng)然了,多值運動會產(chǎn)生一個問題,就是定時器何時關(guān)閉的問題!當(dāng)然是所有的屬性值都運動到目標(biāo)值了才能清理定時器,也就是等最慢的。就好比十個人一起聚餐,不能等到來一個人就開吃!

前幾篇講的都是一個元素對象中某一個屬性的運動,這次講同一個元素對象中多個屬性值的緩沖運動,那么每個屬性都有個終點(目標(biāo)點),我們把這些屬性及其目標(biāo)值寫成一個對象的形式,或者是json狀!容易產(chǎn)生的問題就是上面說的,這里用了共同的速度函數(shù),但有的屬性值從100 –> 101, 有的屬性值從100 –> 600,你得等耗時最長的屬性值到達(dá)目標(biāo)值才能關(guān)閉該obj所擁有的定時器,設(shè)計的思路就是每次執(zhí)行輪詢函數(shù)設(shè)置一個bStob = true;在遍歷掃描json中屬性的時候,只要有沒到到目標(biāo)值的屬性,就設(shè)為false,這樣定時器就不會關(guān)閉,即使有的屬性值已經(jīng)到達(dá)終點,此時輪詢依舊會執(zhí)行掃描,只不過此時該屬性運動速度為0了,也不會運動了。也就是之前:

if(attr == cur) {
 cleartInterval(obj.timer);
}

要增強為:

if (bStop) {
 clearInterval(obj.timer);
}



 
 運動框架(四):多值運動
 
 div {
  width: 100px;
  height: 100px;
  background: orange;
  margin: 10px;
  float: left;
 }
 


 
   var oDiv = document.getElementById('div1');  oDiv.onmouseover = function() {   var json = {   width: 600,   height: 200,   opacity: 30   };   startMove(this, json);  };  oDiv.onmouseout = function() {   var json = {   width: 100,   height: 100,   opacity: 100   };   startMove(this, json);  };  function getStyle(obj, attr) {   if (obj.currentStyle) {   return obj.currentStyle[attr];   } else {   return getComputedStyle(obj, false)[attr];   }  }  function startMove(obj, json) {   clearInterval(obj.timer);   obj.timer = setInterval(function() {   var bStop = true;   for (var attr in json) {    var cur = 0;    if (attr === 'opacity') {    cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);    } else {    cur = parseInt(getStyle(obj, attr));    }    var speed = (json[attr] - cur) / 10;    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);    if (cur != json[attr]) {//凡是有未到達(dá)目標(biāo)點的,一律不讓定時器停下,否則有的屬性不能到達(dá)目標(biāo)值    bStop = false;    }    if (attr === 'opacity') {    cur += speed;    obj.style.filter = 'alpha(opacity:' + cur + ')';    obj.style.opacity = cur / 100;//Chrome,IE    } else {    obj.style[attr] = cur + speed + 'px';    }   }   //整個循環(huán)結(jié)束后,仍然保持著true,說明沒有沒到達(dá)目標(biāo)值的屬性,也就是都到了   if (bStop) {    clearInterval(obj.timer);//說明所有的屬性都到達(dá)了目標(biāo)值   }   }, 30);  }  

JavaScript運動框架之多值運動的示例分析

以上是“JavaScript運動框架之多值運動的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


網(wǎng)頁名稱:JavaScript運動框架之多值運動的示例分析
地址分享:http://weahome.cn/article/gcpddi.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部