js实现多个图片淡入淡出，框架

 

单个淡入淡出已经写过，可以看看上几遍的博文

<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>

 

posted @ 2016-09-07 18:19  MrPat  阅读(833)  评论(0)  编辑  收藏  举报