完美運動框架問題,鼠標放上去有效果,離開后透明度沒有變回來
<!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>不知道是什么問題,跪求請大神幫忙看看。
2016-05-12
代碼43行,if成立執行代碼改成