javascript原生封裝一個淡入淡出效果的函數測試執行個體代碼，javascript淡入淡出

javascript原生封裝一個淡入淡出效果的函數測試執行個體代碼，javascript淡入淡出

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

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

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

 

（一）FadeIn淡入函數

淡入淡出的效果，其實就是一個setInterval()，加上迴圈的DOM操作，通過改變element對象節點的透明度，即可實現這種效果。

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

• speed ： 這個是我們設定opacity的值從0到1的float數值變化速度
• 淡入的邏輯：opacity的值從0到1的float數值變化。

我們來先看代碼實現！

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函數的第一版的寫法：先瞭解一下實現的思路

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

當這個效果暫時實現以後，有些東西並沒有那麼簡單。如果發生多次的觸發效果，會出現setInterval被多次同時使用，出現一些讓人頭疼的BUG。

要解決這個問題，目前有一個方案：添加一個全域狀態，防止多次觸發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 +')';}

註：代碼設定num/100是因為我們以ie為標準去相容ff和GG

js裡面設定DOM節點透明度的函數屬性：filter= "alpha(opacity=" + value+ ")"（相容ie）

ie的filter範圍是0~100

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

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

（二）FadeOut淡出函數

speed ： 這個是我們設定opacity的值從1到0的float數值變化速度（記得考慮相容性）

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

封裝函數

(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 ==>淡入的速度，正整數（可選）;   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 ==>淡入的速度，正整數（可選）;   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(); }

總結

以上所述是小編給大家介紹的javascript原生封裝一個淡入淡出效果的函數測試執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！