无法执行链式运动,还报错了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>多物体运动</title> <style type="text/css"> *{margin: 0;padding: 0;} li{list-style:none;width: 200px;height: 100px;background: black;margin-bottom: 20px;border: 1px solid #f00; 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,height:200},function(){ startMove(this,{opacity:100}); }); } li[i].onmouseout=function(){ startMove(this,{width:200,height:100,opacity:30}); } } function getStyle (obj,attr){ return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var iFlag=true;//假设所有运动都到达目标 for(var attr in json){ //1.取当前值 var icur=0; attr=='opacity'? icur=Math.round(parseFloat(getStyle(obj,attr))*100) : icur=parseInt(getStyle(obj,attr)); //2.计算速度 var speed=(json[attr]-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur!=json[attr]){ iFlag=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(iFlag){ clearInterval(obj.timer); fn && fn(); } },30) } } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
哪位兄弟帮我看下