JavaScript淡入淡出效果

admin發表於2017-02-11
JavaScript
使用jQuery可以輕鬆的實現div的淡入淡出效果，因為有已經封裝好的函式直接呼叫，使用JavaScript實現就沒有那麼簡單了，下面通過一個例項程式碼來分析一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>div淡入淡出效果-螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
#box {
  width:480px;
  height:270px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-240px;
  margin-top:-135px;
  background-color:#333;
}
</style>
<script type="text/javascript">
function func(o){
  i=1;
  s=0.01;
  setInterval(function(){
   i+=s; 
   s = i < 0 ? 0.01 : (i > 1 ? -0.01 : s);
   if(o.filters){
    o.filters[0].opacity=i*100;
   }
   else{
    o.style.opacity=i;
   } 
  },1)
}
window.onload=function(){
 var odiv=document.getElementById("box");
 func(odiv);
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

以上程式碼整合了div的淡入淡出效果，下面就簡單介紹一下此效果的實現過程:

一.實現原理:通過使用定時器函式setInterval()，不斷的設定div的透明度，從不透明設定為透明，這樣就完成了淡出效果，從透明設定為不透明，這樣就實現了淡入效果。需要特別注意瀏覽器相容性問題。

二.程式碼註釋:

1.function func(o){}，宣告一個函式，引數是一個物件。

2.i=1;s=0.01;宣告變數i和s，分別賦值為1和0.01。

3.setInterval()使用定時器函式每隔10毫秒執行一次函式。

3.1.i+=s等同於i=i+s。

3.2.s=i<0?0.01 : (i>1?-0.01:s),這裡其實是一個三元運算子巢狀功能，用於在i大於1、i大於0小於1和i小於0三種情況下給s賦值。

3.3.if(o.filters),判斷是否支援filters集合，用來相容IE瀏覽器。

3.4.o.filters[0].opacity=i*100;給IE瀏覽器下的物件o設定透明度。

3.5.o.style.opacity=i;，給其他標準瀏覽器下的物件o設定透明度。3.6

4.window.onload=function(){}，當文件內容完全載入完成時，再去執行函式中的程式碼。

5.var odiv=document.getElementById("box");獲取id為box的物件。

6.func(odiv);執行函式func()，引數為odiv物件。

相關文章