這篇文章主要介紹了javascript原生封裝一個淡入淡出效果的函數,主要有FadeIn淡入函數和FadeOut淡出函數，需要的朋友可以參考下
說到js的漸變顯示與消失，多數朋友會想到JQuery裡面的fadeIn()、fadeOut()或fadeToggle()。但如果只是為了引入這樣的一個效果，而去呼叫了龐大JQuery函式庫？或者說我用原生js實作一些函數來提高自己~
所以，我簡單的研究了一下純js程式碼寫淡入淡出的效果。
如果發生錯誤，請在評論中指出，我也好自己糾正自己的錯誤
（一）FadeIn淡入函數
淡入淡出的效果，其實就是一個setInterval()，加上循環的DOM操作，透過改變element物件節點的透明度，即可達到這個效果。
所以我們提取出兩個必要的東西：setInterval()、opacity、以及speed。
我們來先看程式碼實作！
html:
<p id="p1"></p>
<span id="span1">123</span>
<button>fadein</button>
<button>fadeOut</button>
登入後複製
css樣式
<style>
p {
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('p1');
fade.fadeIn();
};
btn2.onclick = () => {
let fade = new Fade('p1');
fade.fadeOut();
}登入後複製
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
JavaScript 五大常見函數
#Angular學習筆記之整合三方UI框架、控制項的範例
Node.js實作註冊郵箱啟動功能的方法範例
以上是javascript原生封裝一個淡入淡出效果的函數測試實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
