显示不了动画效果
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width:200px;
height:200px;
background:red;
filter:alpha(opacity:30);
opacity:0.3;
float:left;
margin:10px;
}
</style>
<script type="text/JavaScript">
window.onload=function(){
var oDiv=document.getElementsByTagName("did");
for(var i=0;i<oDiv.length;i++){
oDiv[i].timer=null;
oDiv[i].alpha=30;
oDiv[i].onmouseover=function(){
startMove(this,100);
}
oDiv[i].onmouseout=function(){
startMove(this,30);
}
}
}
function startMove(obj,oTargin){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=0;
if(obj.alpha>oTargin){
speed=-10;
}
else{
speed=10;
}
if(obj.alpha==oTargin){
clearInterval(obj.timer);
}
else{
alpha=alpha+speed;
obj.style.filter='alpha(opactiy:'+alpha+')';
obj.style.opacity=alpha/100;
}
},30)
}
</script>
