javascript实现图片的淡入淡出

javascript实现图片的淡入淡出

这个只是一个简单的实例，后面我会加强滴

我们以div例子：

html：

 <div id="content">
 </div>

css：

 #content{
     height:200px;
     width:200px;
     background:green;
     position:absolute;
     filter:alpha(opacity:30);
     opacity:0.3;
     top:100px;
     left:0px;
     cursor:pointer;
 }

javascript：

function showInfo(iTarget){
     var obj=document.getElementById("content");
     if((iTarget-alpha)>0){  //判断变化的方向滴呀
          speed=10;     
        }else{
          speed=-10;
        }
     clearInterval(Timer);
     Timer=setInterval(function (){
        if(alpha==iTarget){ //这里我们用的是变量滴呀
          clearInterval(Timer);    
        }else{
             alpha+=speed;
             //这个是兼容我们的ie滴哎呀
             obj.style.filter="alpha(opacity:"+speed+")";
             //这个兼容的是我们的火狐和google滴呀
             obj.style.opacity=alpha/100;
        }
     },30)
 }

效果：

 

基本就这样滴呀，这个并不是特别难滴呀；没啥好说的，当一个记录吧

转载于:https://www.cnblogs.com/mc67/p/5170103.html