關于鏈式和多屬性運動的另一種情況
老師已經給我們介紹了一個完美的運動框架
多物體運動>鏈式運動>多屬性運動
假設鏈式步驟{}1,2,3.多屬性同時運動a,b,c
老師的框架運行結構1:{a,b}>2:{a,b,c}>3:{a,b,c}
但是存在一種情況:對于一個物體而言,兩條屬性同時變化,而當第一個屬性完成后接著一個鏈式第三個屬性.此時第二個屬性和第三個屬性繼續同步完成.
即: 1:{ 1.1:{a}>1.2:{c} , b }
時間軸例:
{aaaaaaa}>{cccccccc}
{bbbbbbbbbbbbbbb}
應該如何修改框架實現此種情況.
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參數由startMobe方法調用回調那里傳回來，方便解決這行的函數找不到對象的問題 ??????????startMove(obj,{'height':300,'opacity':100});//用了json同時實現高和透明度的修改 ??????}); ?????????????}? ?????????????//鼠標移開 ??????li[i].onmouseout?=?function(){ ??????startMove(this,{'width':200,'height':50,'opacity':30});//用了json同時實現寬高透明度的修改 ??????????????} ?????????} ????} ??????var?alpha=30; ???function?startMove(obj,json,fn){ ??????clearInterval(obj.timer); ??????var?curStyle=0; ??????obj.timer?=?setInterval(function(){ ????????var?flag=true;//flag如果放在外面的話在計時器里面被修改之后就不會再變回true的值了，如果在計時器里面，每次計時都會把flag重新賦值true ??????????for(var?attr?in?json){ ??????curStyle=(attr=='opacity')?Math.round(parseFloat(getStyle(obj,attr))*100):parseInt(getStyle(obj,attr));//這里把if（）｛｝else｛｝的判斷是不是opacity寫成一句了 ????????????var?speed?=?(json[attr]-curStyle)/10; ??????speed?=?(attr=='opacity')?speed:(speed>0?Math.ceil(speed):Math.floor(speed)); ??????if(curStyle!=json[attr]){//如果不能同時滿足所有當前的屬性值等于目標值就給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做成參數主要是方便處理回調函數fn的對象問題 ??????????} ?????????} ??????????????} ?????????? ??????},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>--------------------------------------------------------------------------------------
花了大半天寫好的，不知道有沒有你想要的“第二個屬性和第三個屬性繼續同步完成”