/** *获取属性 **/ function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name] } } // json {500,height:500} function startMove(obj,json,func){ clearInterval(obj.timer); obj.timer = setInterval(function(){ for(var name in json){ //获取属性的值 var value =0; if(name == 'opacity'){ value = Math.round(parseFloat(getStyle(obj,name))*100); }else{ value = parseInt(getStyle(obj,name)); } speed = (json[name] - value)/6; speed = speed>0 ? Math.ceil(speed):Math.floor(speed); if(Math.abs(json[name] - value)<6){ clearInterval(obj.timer); if(name=='opacity'){ obj.style.filter = "alpha(opacity:"+json[name]+")"; obj.style.opacity = json[name]/100; }else{ obj.style[name] = json[name]; } if(func)func(); }else{ if(name == 'opacity'){ obj.style.filter = "alpha(opacity:"+(value+speed)+")"; obj.style.opacity = (value+speed)/100; }else{ obj.style[name] = value+speed+"px"; } } } },30) }
如何使用：
<!Doctype html> <html> <head> <style> div{200px;height:200px;background:red;margin:30px;float:left;border:3px solid #fff;font-size:20px;} </style> <script src="move2.js"></script> <script> window.onload=function(){ var oDiv = document.getElementsByTagName("div")[0]; oDiv.timer = null; oDiv.onmouseover = function(){ startMove(oDiv,{500,height:500},function(){alert("运动已完成")}); } oDiv.onmouseout = function(){ startMove(oDiv,{200,height:200},function(){alert('运动已完成')}); } } </script> </head> <body> <div>我变</div> </body> </html>
