单个淡入淡出已经写过，可以看看上几遍的博文
<style> *{ margin:0; padding:0; } div{ height:100px; width:100px; background:red; margin:0 auto; margin-bottom:5px; filter:alpha(opacity:30); opacity:0.3; } </style> <body> <div></div> <div></div> <div></div> <div></div> </body>
js代码如下
带注释
1 <script> 2 window.onload=function() 3 { 4 var div=document.getElementsByTagName('div'); 5 for(var i=0;i<div.length;i++) 6 { 7 div[i].alpha=30; //每个div都给透明度30 8 div[i].onmouseover=function() //当鼠标移动到div上时，div的透明度为100 9 { 10 startMove(this,100) 11 } 12 div[i].onmouseout=function() //当鼠标移出div时，div的透明度为30 13 { 14 startMove(this,30) 15 } 16 } 17 18 } 19 var alpha=30; 20 function startMove(obj,iTarget) 21 { 22 clearInterval(obj.timer); 23 obj.timer=setInterval(function() 24 { 25 var speed=(iTarget-obj.alpha)/10; //速度是目标的透明度减去div原本的透明度除以10， 26 speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度必需上下取整，因为没有浮点的小数透明度 27 if(obj.alpha==iTarget) //如果透明度达到目标的透明度，clear 28 { 29 clearInterval(obj.timer); 30 } 31 else 32 { 33 obj.alpha+=speed; 34 obj.style.filter='alpha(opacity:'+alpha+')'; //把alpha赋值给透明度 35 obj.style.opacity=obj.alpha/100; 36 } 37 } 38 39 , 30) 40 } 41 </script>