首页 > 代码库 > js实现多个图片淡入淡出，框架

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

2024-08-12 11:34:07   222人阅读

技术分享

 

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

<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的透明度为3013         {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)   //如果透明度达到目标的透明度，clear28             {29                 clearInterval(obj.timer);30             }31             else32             {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>

 

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


联系
我们