說到j(luò)s的漸變顯示與消失，多數(shù)朋友會(huì)想到JQuery里面的fadeIn()、fadeOut()或fadeToggle()。但如果僅僅是為了引入這樣的一個(gè)效果，而去調(diào)用了龐大JQuery庫？或者說我通過用原生js實(shí)現(xiàn)一些函數(shù)來提高自己~
所以，我簡單的研究了一下純js代碼寫淡入淡出的效果。
如果出現(xiàn)錯(cuò)誤，請?jiān)谠u(píng)論中指出，我也好自己糾正自己的錯(cuò)誤
（一）FadeIn淡入函數(shù)
淡入淡出的效果，其實(shí)就是一個(gè)setInterval()，加上循環(huán)的DOM操作，通過改變element對(duì)象節(jié)點(diǎn)的透明度，即可實(shí)現(xiàn)這種效果。
所以我們提取出兩個(gè)必要的東西：setInterval()、opacity、以及speed。
我們來先看代碼實(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ù)的第一版的寫法：先了解一下實(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); // 清楚定時(shí)器 } }, 30); }}當(dāng)這個(gè)效果暫時(shí)實(shí)現(xiàn)以后，有些東西并沒有那么簡單。如果發(fā)生多次的觸發(fā)效果，會(huì)出現(xiàn)setInterval被多次同時(shí)使用，出現(xiàn)一些讓人頭疼的BUG。
要解決這個(gè)問題，目前有一個(gè)方案：添加一個(gè)全局狀態(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是因?yàn)槲覀円詉e為標(biāo)準(zhǔn)去兼容ff和GG
js里面設(shè)置DOM節(jié)點(diǎn)透明度的函數(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 ： 這個(gè)是我們設(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;})();測試實(shí)例：
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原生封裝一個(gè)淡入淡出效果的函數(shù)測試實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
