誰能告知我錯在哪了？顯示透明度不對呀
<!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}
ul,li{list-style:none}
ul li{width:200px;height:100px;background:yellow;margin-bottom:20px;border:4px solid #000;font-size:12px;filter:alpha(opacity:30);opacity:0.3;}
</style>
<script>
window.onload=function(){
? ?var li1=document.getElementById('Li1');
? ?li1.onmouseover=function(){?
? ? ? ? //startMove(this,'width',400); //移入時寬變?yōu)?00
? ? ? ? startMove(this,'opacity',100);
? ?}
? ? li1.onmouseout=function(){?
? ? ? ? //startMove(this,'width',200); //移出時寬變?yōu)?00
? ? ? ? startMove(this,'opacity',30);
? ?}
}
//var timer=null;
var alpha=30;
function startMove(obj,attr,target){ ?//增加一個參數(shù)attr,用于傳導寬或高'width'或'height'
? ?clearInterval(obj.timer);//先關閉定時器
? ?obj.timer=setInterval(function(){ ?//打開定時器?
? ? ? ?var icur=0;
? ? ? ?if(attr=='opacity'){?
? ? ? icur=Math.round(parseFloat(getStyle(obj,attr)))*100;
? }else{?
? ? ? icur=parseInt(getStyle(obj,attr))
? }
? ? ? ?var speed=(target-icur)/8;
? speed=speed>0?Math.ceil(speed):Math.floor(speed);
? if(icur==target){?
? ? ?clearInterval(obj.timer);
? }else{?
? ? ? if(attr=='opacity'){
? obj.style.filter='alpha(opacity:'+(icur+speed)+')';
? obj.style.opacity=(icur+speed)/100;
}
? else{
? ? ? obj.style[attr]=icur+speed+'px'; //緩沖移動，因['width']相當于.width,故用[attr]
? }
}
? ?},30)
}
/* 獲取任意瀏覽器兼容下的樣式的代碼*/
function getStyle(obj,attr){?
? ?if(obj.currentStyle){ return obj.currentStyle[attr];
? ?}
? ?else{ return getComputedStyle(obj,false)[attr];
? ?}
}
</script>
</head>
<body>
<ul>
? ?<li id="Li1">現(xiàn)在</li>
</ul>
</body>
</html>
2016-09-28
錯在這一行? ? ? icur=Math.round(parseFloat(getStyle(obj,attr)))*100;
應該改為 ? ? ? ??icur=Math.round ??(?? (parseFloat(getStyle(obj,attr)))*100 ??);
也就是說先乘100，再進行四舍五入。 ?
按照你原先的代碼這個值一直為0，因為取出來是小數(shù)，四舍五入之后必然是0。