JavaScript透明度漸變效果

antzone發表於2018-05-11
JavaScript

建議使用CSS3實現類似功能，具體參閱CSS透明度漸變效果一章節。

下面分享一個使用JavaScript實現的此功能，相容性更好一些，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width: 150px;
  height: 150px;
  background-color: #8B0000;
  float: left;
  margin: 10px;
  border: 3px solid #599;
  filter: alpha(opacity: 30);
  opacity: 0.3;
}
</style>
<script>
window.onload = function() {
  var aDiv = document.getElementsByTagName("div");
  for (var index = 0; index < aDiv.length; index++) {
    aDiv[index].timer = null;
    aDiv[index].alpha = 30;
    aDiv[index].onmouseover = function () {
      startMove(this, 100);
    }
    aDiv[index].onmouseout = function () {
      startMove(this, 30);
    }
  }
}
 
function startMove(obj, iTarget) {
 
  clearInterval(obj.timer);
 
  obj.timer = setInterval(function() {
    var speed = (iTarget - obj.alpha) / 10;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (obj.alpha == iTarget) {
      clearInterval(obj.timer);
    } else {
      obj.alpha += speed;
      obj.style.filter = "alpha(opacity:" + obj.alpha + ")";
      obj.style.opacity = obj.alpha / 100;
    }
  }, 30);
}
</script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

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

一.程式碼註釋:

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

（2）.var aDiv = document.getElementsByTagName("div")，獲取div元素集合。

（3）.for (var index = 0; index < aDiv.length; index++) {}，遍歷集合中的每一個div元素。

（4）.aDiv[index].timer = null，為當前物件新增一個自定義屬性timer並賦值為null，用來作為定時器函式的標識。

（5）.aDiv[index].alpha = 30，為當前物件新增一個自定義屬性alpha 並賦值為30（值是經過處理的），預設透明度。

（6）.aDiv[index].onmouseover = function () {

  startMove(this, 100);

}，為當前元素註冊onmouseover事件處理函式。

滑鼠懸浮的時候，目標透明度為100，也就是不透明。

（7）.aDiv[index].onmouseout = function () {

  startMove(this, 30);

}，滑鼠離開，透明度設定為30。

（8）.function startMove(obj, iTarget) ，第一個引數是元素物件，第二個引數是目標透明度。

（9）.clearInterval(obj.timer)，停止上一個定時器函式的執行，防止反覆移入移出導致定時器疊加的問題。

（10）.obj.timer = setInterval(function() {},30)，每隔30毫秒執行一次回撥函式。

（11）.var speed = (iTarget - obj.alpha) / 10，透明度變化幅度。

（12）.speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)，將速度轉換為整數。

（13）. if (obj.alpha == iTarget) {

  clearInterval(obj.timer);

}，如果達到目標透明度值，那麼就停止定時器函式的執行。

（14）.else {

  obj.alpha += speed;

obj.style.filter = "alpha(opacity:" + obj.alpha + ")";

  obj.style.opacity = obj.alpha / 100;

}，設定當前元素透明度，採用了相容性寫法。

二.相關閱讀:

（1）.getElementsByTagName參閱document.getElementsByTagName()一章節。

（2）.onmouseover事件參閱javascript mouseover事件一章節。

（3）.onmouseout事件參閱javascript mouseout事件一章節。

（4）.clearInterval參閱clearInterval()一章節。

（5）.setInterval參閱window.setInterval()一章節。

相關文章