完美运动框架问题,鼠标放上去有效果,离开后透明度没有变回来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;} div{height:100px;width:100px;background-color:#F00;border:5px solid #63C;margin-top:2px;opacity:0.3;filter:Alpha(opacity:30);} </style> <script> window.onload=function(){ var div1=document.getElementById("div1"); div1.onmouseover=function(){startMove(div1,{"width":"200","opacity":"100"})}; div1.onmouseout=function(){startMove(div1,{"opacity":"30","width":"100"})}; } //完美运动框架 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr] } else{return getComputedStyle(obj,false)[attr];} } //startMove(obj,{attr1:target1,attr2:target2},fn) function startMove(obj,json,fn){ clearInterval(obj.timer); var flag;//标志所有运动是否达到目标值 obj.timer=setInterval(function(){ flag=true;//进入定时器时,现将flag设置为所有的属性值都已经达到目标值 for( var attr in json) //取当前的值 {var icur=0; if(attr=="opacity"){icur=Math.round(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]){ flag=false;}//假设有三个json的值,三个值中只要有一个没达到目标值,flag值就为false if(attr=="opacity"){obj.style[attr]=icur;}else{obj.style[attr]=icur+speed+"px";} //obj.style.width=obj.style[attr] 注意 style[attr] if(flag){clearInterval(obj.timer);if(fn){fn()} }}},30); } </script> </head> <body> <div id="div1"> </div> <div id="div2"></div> <div id="div3"></div> </body> </html>
不知道是什么问题,跪求请大神帮忙看看。