这里可实现5个元素中随便一个,鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小的效果。
要点一:
var speed = 0;
if(target>obj.alpha){
speed = 5;
}else{
speed = -5;
}
根据目标值和当时值的对比,来决定是正向还是负向速度。
要点二:
for(i=0; i runs_li[i].timer = null; runs_li[i].alpha = 30; runs_li[i].onmouseover = function(){ startrun(this,100); } runs_li[i].onmouseout = function(){ startrun(this,30); } } 给每一个元素加上各自的透明度值,各自的透明度变化分开。 最后,上代码:
body,ul,li{margin:0; padding:0;}
#runs{width:300px; margin:10px auto;}
#runs li{width:80px; height:80px; background:#06c; list-style:none;
float:left; margin:10px; display:inline;
filter:alpha(opacity=30); opacity:0.3;}
window.onload = function(){
var runs = document.getElementById("runs");
var runs_li = runs.getElementsByTagName("li");
var i=0;
for(i=0; i runs_li[i].timer = null; runs_li[i].alpha = 30; runs_li[i].onmouseover = function(){ startrun(this,100); } runs_li[i].onmouseout = function(){ startrun(this,30); } } } function startrun(obj,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = 0; if(target>obj.alpha){ speed = 5; }else{ speed = -5; } if(obj.alpha == target){ clearInterval(obj.timer); }else{ obj.alpha = obj.alpha + speed; obj.style.filter = "alpha(opacity="+obj.alpha+")"; obj.style.opacity = obj.alpha/100; } },30) }
更多信息请查看IT技术专栏