javascript實現的淡入淡出效果程式碼例項

admin發表於2017-03-24
JavaScript

實現淡入淡出效果，當然使用jquery最為方便，只需要簡單的函式和引數就可以實現了，本章節介紹一下如何用原生的javascript實現此效果，希望能夠給感覺的朋友帶來參考作用。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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>

上面的程式碼實現了我們的要求，下面介紹一下此程式碼的實現過程:

一.程式碼註釋:

1.function getStyle(node,property){}，此函式可以獲取指定元素的指定樣式屬性值，這裡不多介紹了，具體可以參閱getComputedStyle()和currentStyle屬性的用法一章節。

2.function setOpacity(elem,value,speed){}，此函式可以實現透明度的漸變效果，第一個引數是元素物件，也就是要設定透明度過渡的元素，第二個是透明度目標值，是整數形式的(80)，第三個引數規定在多長時間內完成漸變過程，單位是毫秒。

3.var old=getStyle(elem,"opacity")*100，獲取指定元素在過渡前的預設透明度值，無論是在低版本IE瀏覽器還是在標準瀏覽器下返回值都是小數，這裡乘以100是為了轉換整數便於計算。

4.var time=100，規定定時器函式執行的時間間隔。

5.var count=speed/time，計算出定時器函式執行的次數。

6.var range=(value-old)/count，計算出每次執行透明度變化的幅度。

7.var timer=null，作為定時器函式的標識。

7.timer=setInterval(done,time)，呼叫定時器函式。

8.function done(){}，此函式可以被定時器函式不斷呼叫設定透明度。

9.old=old+range，在原來透明度值基礎上加上變化幅度。

10.if(old>=100||old<=1){clearInterval(timer)}，如果old的值不在1-100之間，就會停止定時器函式的執行。

11.if("\v"=="v"){elem.filters.alpha.opacity=1*old;}，判斷是否是IE8和IE8以下瀏覽器，如果是則設定透明度。

12.else{elem.style.opacity=0.01*old;}，如果是其他瀏覽器則使用此種方式設定透明度，因為在設定透明度方面存在著相容性問題，具體可以參閱css設定元素透明度程式碼例項一章節。 

二.相關閱讀:

1.setInterval()函式可以參閱setInterval()一章節。 

2.clearInterval()函式可以參閱window.clearInterval()一章節。 

相關文章