關(guān)于鏈?zhǔn)胶投鄬傩赃\(yùn)動(dòng)的另一種情況
老師已經(jīng)給我們介紹了一個(gè)完美的運(yùn)動(dòng)框架
多物體運(yùn)動(dòng)>鏈?zhǔn)竭\(yùn)動(dòng)>多屬性運(yùn)動(dòng)
假設(shè)鏈?zhǔn)讲襟E{}1,2,3.多屬性同時(shí)運(yùn)動(dòng)a,b,c
老師的框架運(yùn)行結(jié)構(gòu)1:{a,b}>2:{a,b,c}>3:{a,b,c}
但是存在一種情況:對(duì)于一個(gè)物體而言,兩條屬性同時(shí)變化,而當(dāng)?shù)谝粋€(gè)屬性完成后接著一個(gè)鏈?zhǔn)降谌齻€(gè)屬性.此時(shí)第二個(gè)屬性和第三個(gè)屬性繼續(xù)同步完成.
即: 1:{ 1.1:{a}>1.2:{c} , b }
時(shí)間軸例:
{aaaaaaa}>{cccccccc}
{bbbbbbbbbbbbbbb}
應(yīng)該如何修改框架實(shí)現(xiàn)此種情況.
2018-06-26
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title></title> <style?type="text/css"> body?{ ????margin:?0px; } li?{ ????width:200px; ????height:50px; ????list-style-type:none; ????margin-bottom:10px; ????background-color:brown; ????filter:alpha(opacity=30);? ????opacity:0.3; } </style> <script?type="text/javascript">??? window.onload?=?function(){ ??????var?li?=?document.getElementsByTagName('li'); ??????for(var?i=0;i<li.length;i++){ ??????li[i].timer=null;? ??????li[i].onmouseover?=?function(){ ??????startMove(this,{'width':400},function(obj){//這里的obj參數(shù)由startMobe方法調(diào)用回調(diào)那里傳回來(lái)，方便解決這行的函數(shù)找不到對(duì)象的問(wèn)題 ??????????startMove(obj,{'height':300,'opacity':100});//用了json同時(shí)實(shí)現(xiàn)高和透明度的修改 ??????}); ?????????????}? ?????????????//鼠標(biāo)移開(kāi) ??????li[i].onmouseout?=?function(){ ??????startMove(this,{'width':200,'height':50,'opacity':30});//用了json同時(shí)實(shí)現(xiàn)寬高透明度的修改 ??????????????} ?????????} ????} ??????var?alpha=30; ???function?startMove(obj,json,fn){ ??????clearInterval(obj.timer); ??????var?curStyle=0; ??????obj.timer?=?setInterval(function(){ ????????var?flag=true;//flag如果放在外面的話在計(jì)時(shí)器里面被修改之后就不會(huì)再變回true的值了，如果在計(jì)時(shí)器里面，每次計(jì)時(shí)都會(huì)把flag重新賦值true ??????????for(var?attr?in?json){ ??????curStyle=(attr=='opacity')?Math.round(parseFloat(getStyle(obj,attr))*100):parseInt(getStyle(obj,attr));//這里把if（）｛｝else｛｝的判斷是不是opacity寫(xiě)成一句了 ????????????var?speed?=?(json[attr]-curStyle)/10; ??????speed?=?(attr=='opacity')?speed:(speed>0?Math.ceil(speed):Math.floor(speed)); ??????if(curStyle!=json[attr]){//如果不能同時(shí)滿足所有當(dāng)前的屬性值等于目標(biāo)值就給flag賦值false ?????????flag=false; ?????????} ?????????obj.style[attr]=(attr=='opacity')?(curStyle+speed)/100:(curStyle+speed+'px'); ?????????if(flag){ ??????clearInterval(obj.timer);???? ????????????if(fn){ ??????????????fn(obj);//這里把obj做成參數(shù)主要是方便處理回調(diào)函數(shù)fn的對(duì)象問(wèn)題 ??????????} ?????????} ??????????????} ?????????? ??????},30) ???} ?? ??function?getStyle(obj,attr){ ??????if(obj.currentStyle){ ?????????return?obj.currentStyle[attr]; ??????}else{ ??????????return?window.getComputedStyle(obj,false)[attr]; ???????? ??????} ??} ?</script> </head> <body> <li?id="li"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </body> </html>--------------------------------------------------------------------------------------
花了大半天寫(xiě)好的，不知道有沒(méi)有你想要的“第二個(gè)屬性和第三個(gè)屬性繼續(xù)同步完成”