javascript淡入淡出效果代码实例

实现淡入淡出效果，当然使用jquery最为方便，只需要简单的函数和参数就可以实现了，本章节介绍一下如何用原生的javascript实现此效果，希望能够给感觉的朋友带来参考作用。

代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
#thediv{
  width:200px;
  height:100px;
  margin:0px auto;
  background:red;
  opacity:0.1;   
  filter:alpha(opacity=30); 
}
</style>
<script type="text/javascript"> 
function getStyle(node,property){      
  if(node.style[property]){        
    return node.style[property];      
  }      
  else if(node.currentStyle){        
    return node.currentStyle[property];      
  }      
  else if(document.defaultView&&document.defaultView.getComputedStyle){        
    var style=document.defaultView.getComputedStyle(node,null);        
    return style.getPropertyValue(property);      
  }      
  return null;    
}
function setOpacity(elem,value,speed){
  var old=getStyle(elem,"opacity")*100;
  var time=100;
  var count=speed/time;
  var range=(value-old)/count;
  var timer=null;
  timer=setInterval(done,time);
    
  function done(){
    old=old+range;
    if(old>=100||old<=1){
      clearInterval(timer);
    }
    if("\\v"=="v"){ 
      elem.filters.alpha.opacity=1*old;     
    }     
    else{        
      elem.style.opacity=0.01*old;     
    } 
  }  
}
window.onload=function(){
  var odiv=document.getElementById("thediv");
  setOpacity(odiv,80,2000);
}
</script>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

代码描述：javascript淡入淡出。javascript淡入淡出效果代码实例

下载全部收藏

154 206

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册