JavaScript漸變方式設定透明度

admin發表於2017-04-01
JavaScript

本章節介紹一下如何以漸變方式設定元素的透明度。

下面就是程式碼時候，並在隨後介紹一下它的實現過程。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
#antzone{
  width:200px;
  height:200px;
  margin:0 auto;
  background:#000;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var timer=setInterval(colorLiner,20);
  var val=100;
  function colorLiner(){
    if(val >= 0){
      var odiv=document.getElementById('antzone');
      odiv.style.opacity=val/100;
      val--;
    }
    else{
      clearInterval(timer);
    }
  }
}
</script>
</head>
<body>
<div id="antzone">螞蟻部落</div>
</body>
</html>

不相容低版本IE瀏覽器，相容性這裡不做介紹。

一.程式碼註釋:

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

（2）.var timer=setInterval(colorLiner,20)，以定時器的方式不間斷執行指定的函式。

（3）.var val=100，一個標識，用來計算透明度的程度。

（4）.function colorLiner()，此函式實現了增加透明度的效果。

（5）.if(val >= 0){

  var odiv=document.getElementById('antzone');

  odiv.style.opacity=val/100;

  val--;

}，如果val值大於0，那麼就設定元素的透明度，然後再將val值減一。

（6）.else{

  clearInterval(timer);

}，如果val值小於-0，那麼就停止定時器函式的執行。

二.相關閱讀:

（1）.setInterval方法參閱setInterval()一章節。

（2）.透明度參閱相容所有瀏覽器js設定元素透明度效果一章節。

相關文章