快捷導(dǎo)航

javascript原生封裝一個淡入淡出效果的函數(shù)測試實例代碼

更新時間：2018年03月19日 11:29:33 作者：thomaszhou

這篇文章主要介紹了javascript原生封裝一個淡入淡出效果的函數(shù),主要有FadeIn淡入函數(shù)和FadeOut淡出函數(shù)，需要的朋友可以參考下

說到j(luò)s的漸變顯示與消失，多數(shù)朋友會想到JQuery里面的fadeIn()、fadeOut()或fadeToggle()。但如果僅僅是為了引入這樣的一個效果，而去調(diào)用了龐大JQuery庫？或者說我通過用原生js實現(xiàn)一些函數(shù)來提高自己~

所以，我簡單的研究了一下純js代碼寫淡入淡出的效果。

如果出現(xiàn)錯誤，請在評論中指出，我也好自己糾正自己的錯誤

（一）FadeIn淡入函數(shù)

淡入淡出的效果，其實就是一個setInterval()，加上循環(huán)的DOM操作，通過改變element對象節(jié)點的透明度，即可實現(xiàn)這種效果。

所以我們提取出兩個必要的東西：setInterval()、opacity、以及speed。

speed ：這個是我們設(shè)置opacity的值從0到1的float數(shù)值變化速度
淡入的邏輯：opacity的值從0到1的float數(shù)值變化。

我們來先看代碼實現(xiàn)！

html:

<div id="div1"></div>
<span id="span1">123</span>
<button>fadein</button>
<button>fadeOut</button>

css樣式

<style>
 div {
  width: 100px;
  height: 100px;
  background-color: #1d7db1;
  opacity:0;
 }
 </style>

首先我們來看fadeIn函數(shù)的第一版的寫法：先了解一下實現(xiàn)的思路

function fadeIn(ele, speed) {
  let num = 0;
  let time = setInterval(() => {
    num += speed;
    ele.style.opacity = num / 100;
    if (num >= 100) {
     clearInterval(time); // 清楚定時器
    }
  }, 30);
  }
}

當(dāng)這個效果暫時實現(xiàn)以后，有些東西并沒有那么簡單。如果發(fā)生多次的觸發(fā)效果，會出現(xiàn)setInterval被多次同時使用，出現(xiàn)一些讓人頭疼的BUG。

要解決這個問題，目前有一個方案：添加一個全局狀態(tài)，防止多次觸發(fā)setInterval。

let Fadeflag = true;
function fadeIn(ele, speed) {
  let num = 0;
  if (Fadeflag) {
  let time = setInterval(() => {
    num += speed;
    Fadeflag = false;
    ele.style.opacity = num / 100;
    if (num >= 100) {
     clearInterval(time);
     Fadeflag = true;
    }
  }, 30);
  }
}

兼容性問題?。?！

先看代碼

set: function(elem, num) {
  elem.style.opacity !== undefined ? elem.style.opacity = num / 100 : elem.style.filter = 'alpha(opacity = '+ num +')';
}

注：代碼設(shè)置num/100是因為我們以ie為標(biāo)準(zhǔn)去兼容ff和GG

js里面設(shè)置DOM節(jié)點透明度的函數(shù)屬性：filter= "alpha(opacity=" + value+ ")"（兼容ie）

ie的filter范圍是0~100

opacity=value/100（兼容FF和GG）。

FF和GG的opacity是0~1 （為了兼容ie的filter范圍，我們用num/100）

（二）FadeOut淡出函數(shù)

speed ：這個是我們設(shè)置opacity的值從1到0的float數(shù)值變化速度（記得考慮兼容性）

淡出的邏輯：opacity的值從1到0的float數(shù)值變化。

封裝函數(shù)

(function() {
  let fadeFlag = true;
  function Fade(selector) {
    this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);
  }
  Fade.prototype = {
   constructor: Fade,
    setOpacity: (elem, opacity) => { // 兼容ie10—
      elem.filters ? elem.style.filter = 'alpha(opacity = '+ opacity +')':  elem.style.opacity = opacity / 100;
      return true;
   },
   setOpacity: function(num) {
      this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
   },
    fadeIn: function(speed, opacity){
   /*
   speed ==>淡入的速度，正整數(shù)（可選）;
   opacity ==>淡入到指定的透明度，0～100（可選）;
      */
      speed = speed || 2;
      opacity = opacity || 100;
      let num = 0; // 初始化透明度變化值為0
      if (fadeFlag) {
        let time = setInterval(() => {
          num += speed;
          fadeFlag = false;
          this.setOpacity(num);
          this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
          if (num >= opacity) {
            clearInterval(time);
            fadeFlag = true;
          }
        }, 20);
      }
    },
    fadeOut: function(speed, opacity) {
   /*
   speed ==>淡入的速度，正整數(shù)（可選）;
   opacity ==>淡入到指定的透明度，0～100（可選）;
   */
      speed = speed || 2;
      opacity = opacity || 0;
      let num = 100; // 初始化透明度變化值為0
      if (fadeFlag) {
        let time = setInterval(() => {
          num -= speed;
          fadeFlag = false;
          this.set(num);
          this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
          if (num <= opacity) {
          clearInterval(time);
          fadeFlag = true;
          }
        }, 20);
      }
    }
  };
window.Fade = Fade;
})();

測試實例：

let btn = document.getElementsByTagName('button')[0];
 let btn2 = document.getElementsByTagName('button')[1];
 btn.onclick = () => {
  let fade = new Fade('div1');
 fade.fadeIn();
 };
 btn2.onclick = () => {
  let fade = new Fade('div1');
  fade.fadeOut();
 }

總結(jié)

以上所述是小編給大家介紹的javascript原生封裝一個淡入淡出效果的函數(shù)測試實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: