javascript淡入淡出效果程式碼例項

antzone發表於2017-04-12
JavaScript

使用jQuery實現淡入淡出效果非常的簡單，具體可以參與一下兩篇文章:

（1）.淡入效果可以參閱jQuery fadeIn()一章節。

（2）.淡出效果可以參閱jQuery fadeOut()一章節。

下面就通過程式碼例項介紹一下如何使用原生javascript介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#demo div.box {
  float:left;
  width:31%;
  margin:0 1%;
}
#demo div.box h2{
  margin-bottom:10px;
}
#demo div.box h2 input{
  padding:5px 8px;
  font-size:14px;
  font-weight:bolder;
}
#demo div.box div {
  text-indent:10px;
  line-height:22px;
  border:2px solid #555;
  padding:0.5em;
  overflow:hidden;
}
</style>
<script>
window.onload = function () {
  var iBase = {
    Id: function (name) {
      return document.getElementById(name);
    },
    SetOpacity: function (ev, v) {
      ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
    }
  }
  function fadeIn(elem, speed, opacity) {
    speed = speed || 20;
    opacity = opacity || 100;
    elem.style.display = 'block';
    iBase.SetOpacity(elem, 0);
    var val = 0;
    (function () {
      iBase.SetOpacity(elem, val);
      val += 5;
      if (val <= opacity) {
        setTimeout(arguments.callee, speed)
      }
    })();
  }
 
  function fadeOut(elem, speed, opacity) {
    speed = speed || 20;
    opacity = opacity || 0;
    var val = 100;
    (function () {
      iBase.SetOpacity(elem, val);
      val -= 5;
      if (val >= opacity) {
        setTimeout(arguments.callee, speed);
      }
      else if (val < 0) {
        elem.style.display = "none";
      }
    })();
  }
  var btns = iBase.Id("demo").getElementsByTagName("input");
  btns[0].onclick = function () {
    fadeIn(iBase.Id("fadeIn"));
  }
  btns[1].onclick = function () {
    fadeOut(iBase.Id("fadeOut"), 40);
  }
  btns[2].onclick = function () {
    fadeOut(iBase.Id("fadeTo"), 20, 10);
  }
}
</script>
</head>
<body>
<div id="demo">
  <div class="box">
    <h2><input type="button" value="點選淡入"/></h2>
    <div id="fadeIn" style="display:none">
      <p>螞蟻部落</p>
    </div>
  </div>
 
  <div class="box">
    <h2><input type="button" value="點選淡出"/></h2>
    <div id="fadeOut">
      <p>螞蟻部落</p>
    </div>
  </div>
 
  <div class="box">
    <h2><input type="button" value="點選淡出至指定透明度"/></h2>
    <div id="fadeTo">
      <p>螞蟻部落</p>
    </div>
  </div>
</div>
</body>
</html>

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

一.程式碼註釋:

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

（2）.var iBase = {

  Id: function (name) {

    return document.getElementById(name);

  },

  SetOpacity: function (ev, v) {

    ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;

  }

}，封裝了兩個方法，第一個是功能是獲取指定id元素物件。

第二個的功能是實現相容所有瀏覽器的元素透明度設定。

（3）.function fadeIn(elem, speed, opacity) {}，實現元素的淡入效果，第一個引數規定要淡入的元素物件。

第二個引數規定淡入的速度（其實是定時器函式的時間間隔）。

第三個引數規定目標透明度值。

（4）.speed = speed || 20，如果傳遞了speed引數，那麼就採用傳遞的值，否則使用預設值20。

（5）.opacity = opacity || 100，如果傳遞了opacity引數，那麼就採用傳遞的值，否則使用預設的值100。

（6）.elem.style.display = 'block'，設定元素為顯示狀態。

（7）.iBase.SetOpacity(elem, 0),然後先將透明度設定為0。

（8）.var val = 0,宣告一個變數並賦初值為0。

（9）.(function () {})()，匿名自執行函式。

（10）.iBase.SetOpacity(elem, val)，設定元素的透明度。

（11）.val += 5，val值加5。

（12）.if (val <= opacity) {

  setTimeout(arguments.callee, speed)

},如果val值小於等於目標opacity值，那麼遞迴呼叫匿名函式。

二.相關閱讀:

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

（2）.setTimeout()可以參閱setTimeout()一章節。

相關文章