为什么图形完全不动?
按照视频课程打的代码,但是发现图形并不会动,求助大神!在这先感谢您费眼看我这代码了。
多物体同时运动的html文件
<!DOCTYPE html> <html xmlns="http://"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"></meta> <!-- 可让中文正常显示 --> <title>多物体同时运动,同时改变宽高透明度</title> <link href="css/main.css" rel="stylesheet" /> <style type="text/css"> ul,li { list-style: none; } ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 2px solid red; filter:alpha(opacity:30); opacity: 0.3; } </style> <script src="js/perfectmove.js"></script> <script> window.onload=function(){ var ali=document.getElementById('li1'); ali.onmouseover=function(){ startMove(ali,{width:400,height:200,opacity:100}); } ali.onmouseout=function(){ startMove(ali,{width:200,height:100,opacity:30}); } </script> </head> <body> <ul> <li id="li1"></li> </ul> </body> </html>
完美运动框架的js代码:
//完美运动框架,可同时变化 function startMove(obj,json,fn){ var flag=true; //假设所有的运动都到达了目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ //1.取当前的值 var icur=0; if (attr=='opacity') { icur=Math.round(parseFloat(getStyle(obj,attr))*100); } else{ icur=parseInt(getStyle(obj,attr)); } //2.计算速度 var speed=(json[attr]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.监测停止 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) } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }