                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

嗯...遍歷了每個li列表沒有透明度變化，是怎么回事呢

<!DOCTYPE?html>
<html>
<head>
	<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
	<title>透明度改變</title>
????<style?type="text/css">
????????
????	?ul?li{
????????list-style:?none;
????		width:?100px;
????		height:?100px;
????		top:?0px;
????		background:purple;
????		filter:alpha(opacity:100);
????		opacity:?1;
????????float:?left;
????????margin-right:?20px;
????	}
????</style>
</head>
<body>
??????<div?id="alpha">
??????????<ul>
????????????<li></li>
????????????<li></li>
????????????<li></li>
????????????<li></li>
??????????</ul>
??????</div>
??????<script?type="text/javascript">
??????	window.onload=function(){
??????		var?alphas=document.getElementsByTagName("li");
??????????for?(var?i?=?0;?i?<?alphas.length;?i++)?{
????????????alphas[i].timer;
????????????alphas[i].opacity=100;
????????????alphas[i].onmouseover=function(){
??????????????startMove(this,50);
????????????}
????????????alphas[i].onmouseout=function(){
??????????????startMove(this,100);
????????????}
??????	}
????????//?var?timer=null;
????????//?var?opacity=100;這里也應(yīng)該為每個li列表單獨設(shè)置否則會有bug
??????	function?startMove(obj,iTarget){
??????		clearInterval(obj.timer);
??????		obj.timer=setInterval(function(){
??????		var?speed=obj.opacity>iTarget?speed=-10:speed=10;
????????????	if?(obj.opacity==iTarget)?{
????????????		clearInterval(obj.timer);
????????????	}else{
????????????		obj.opacity+=speed;
????????????		obj.style.filter="alpha(opacity:"+obj.opacity+")";
????????????		obj.style.opacity=obj.opacity/100;
????????????	}
??????		},30)
???????????
??????	}
??????</script>
</body>
</html>