修改后的運動框架仍然在同時運行的時候存在bug~希望大家繼續完善修改
//getStyle封裝函數
????function?getStyle(obj,attr){
????????if(obj.currentStyle){
????????????return?obj.currentStyle[attr];
????????}else{
????????????return?getComputedStyle(obj,false)[attr];
????????}
????}
????//運動框架封裝函數
????function?startMove(obj,json,fn){
????????clearInterval(obj.timer);
????????obj.timer?=?setInterval(function(){
????????var?flag=true;
????????for(var?attr?in?json){
????????????if(attr=='opacity'){
????????????????var?curStyle=?Math.round(parseFloat(getStyle(obj,attr))*100);
????????????}else{
????????????var?curStyle?=?parseInt(getStyle(obj,attr));
????????????}
????????????var?rate?=?(json[attr]-curStyle)/6;
????????????rate?=?rate>0?Math.ceil(rate):Math.floor(rate);
????????????????if(json[attr]?!=?curStyle){
??????????????????????flag=?false;
??????????????????}
????????????????if(attr=='opacity'){
????????????????????obj.style.opacity=?(curStyle+rate)/100;
????????????????????obj.style.filter=?'alpha(opacity='+(curStyle+rate)+')';
????????????????????}else{
????????????????????obj.style[attr]?=?curStyle+rate+'px';
????????????????????}
????????????????if(flag){
????????????????????if(fn){
??????????????????????????fn()
??????????????????????}else{
??????????????????????????clearInterval(obj.timer);
??????????????????????}
??????????????????}
????????????????}
????????????},30)
????????}參考了問答里大家的回復，這個運動框架已經比較完美~
2015-10-20
在評論看到你了，回調函數不能使用，我的解決辦法如下：
【在每次時間間隔開始置flag為true】，就是下面代碼的第6行。
//?完美運動框架 function?startMove(obj,json,fn){// json={attr1:iT1,attr2:iT2}??opacity:0.5 var?flag?=?true; clearInterval(obj.timer); obj.timer?=?setInterval(function(){ flag?=?true;//????在這里把flag設一下true哦 var?speed?=?0, icur?=?null; for(var?attr?in?json) { // 判斷速度 if(attr?==?"opacity"){ icur?=?Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur?=?parseInt(getStyle(obj,attr)); } speed?=?(json[attr]?-?icur)/8; speed?=?speed>0?Math.ceil(speed):Math.floor(speed); // 判斷臨界值 if(icur?!=?json[attr]){//有一個屬性沒達到要求iT，flag就等于false flag?=?false; } if(attr?==?"opacity"){ obj.style.filter?=?"alpha(opacity:"+(icur+speed)+")"; obj.style.opacity?=?(icur+speed)/100; }else{ obj.style[attr]?=?icur+speed+"px"; } // 設置值 if(flag){// 全部屬性都達到要求iT拉 clearInterval(obj.timer); //alert(333); if(fn)fn(); //console.log("fn:"+fn);fn(); } //console.log("flag"+flag); } },30); }2015-10-15
單個物體html
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>Document</title> <style?type="text/css"> *{ margin:?0; padding:?0; } ul{ margin-top:?20px; } ul,li{ list-style:?none; } ul?li{ width:200px; height:?100px; background:?red; margin-bottom:?20px; filter:alpha('opacity':30); opacity:?0.3; border:?1px?solid?#ccc;? } </style> <script?type="text/javascript"?src="js/move(json).js"></script> <script?type="text/javascript"> window.onload?=?function(){ var?Li?=?document.getElementById('li1'); Li.onmouseover?=?function(){ starMove(Li,{width:400,height:200,opacity:100}); } Li.onmouseout?=?function(){ starMove(Li,{height:100,width:200,opacity:30}); } } </script> </head> <body> <ul> <li?id="li1"></li> </ul> </body> </html>多個物體html
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>Document</title> <style?type="text/css"> *{ margin:?0; padding:?0; } ul{ margin-top:?20px; } ul,li{ list-style:?none; } ul?li{ width:200px; height:?100px; background:?red; margin-bottom:?20px; filter:alpha('opacity':30); opacity:?0.3; border:?1px?solid?#ccc;? } </style> <script?type="text/javascript"?src="js/move(json)-Fix.js"></script> <script?type="text/javascript"> window.onload?=?function(){ var?aLi?=?document.getElementsByTagName('li'); for(var?i=0;?i<aLi.length;i++){ aLi[i].timer?=?null; aLi[i].timer2?=?null; aLi[i].alpha?=?30; aLi[i].onmouseover?=?function(){ var?This=this; starMove(This,{width:400,height:200,opacity:100}); } aLi[i].onmouseout?=?function(){ var?This=this; starMove(This,{height:100,width:200,opacity:30}); } } } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>move-json
function?getStyle(obj,attr){ if(obj.currentStyle){ return?obj.currentStyle[attr]; }else{ return?getComputedStyle(obj,false)[attr]; } } function?starMove(obj,json,fn){ var?flag?=?true;//假設 clearInterval(obj.timer); obj.timer?=?setInterval(function(){ for(var?attr?in?json){ //取當前值 var?icur?=?0; if(attr?==?'opacity'){ icur?=?Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur?=?parseInt(getStyle(obj,attr)); } var?speed?=?(json[attr]?-?icur)/8; speed?=?speed>0?Math.ceil(speed):Math.floor(speed); if(icur?!=?json[attr]){ flag?=?false?; } if(attr?==?'opacity'){ obj.style.filter?=?'alpha(opacity:"+(icur+speed)+")'; obj.style.opacity?=?(icur+speed)/100; }else{ obj.style[attr]?=?icur?+?speed?+?'px'; } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } } },30) }這個是我的，測試沒問題。
2015-10-11
if(flag){}應該放到for( ?in ?josn) ?{} 外邊這樣一樓就差不多沒有大的毛病啦！
2015-10-11
在IE中還是運行不了
2015-09-14
function?startMove(obj,json,fn){ clearInterval(obj.timer); var?icur?=?0; obj.timer?=?setInterval(function(){ //flag的位置 var?flag?=?true; for(var?attr?in?json){ //第一步：取當前值 if(attr?==?'opacity'){ icur?=?Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur?=?parseInt(getStyle(obj,attr)); } //?第二步：算速度 var?speed?=?(json[attr]-icur)/10; speed?=?speed>0?Math.ceil(speed):Math.floor(speed); //第三步:判斷是否所有的元素都到達;如果不是則把flag設為false； if(icur?!=?json[attr]){ flag?=?false; } if(attr?==?"opacity"){ obj.style.filter?=?"alpha(opacity:"?+?(icur+speed)?+?")"; obj.style.opacity?=?(icur+speed)/100; }else{ obj.style[attr]?=?icur?+?speed?+?"px"; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30); }2015-09-14
首先要理解for in循環，他們返回屬性名的順序是不可預測的。然后你這個只要有一個滿足，就會執行flag=true，這樣還是一樣不能同時運動。
2015-09-10
還是有問題，在同時運動的時候