单个淡入淡出已经写过，可以看看上几遍的博文
<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>
时间： 2024-12-16 14:01:11