javascript原生封裝乙個淡入淡出效果的函式

2021-09-11 12:59:42 字數 1713 閱讀 6668

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

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

author： thomaszhou

淡入淡出的效果，其實就是乙個setinterval()，加上迴圈的dom操作，通過改變element物件節點的透明度，即可實現這種效果。

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

我們來先看**實現！

html:

"div1">


"span1">123


fadein


fadeout


複製**
css樣式

複製**
首先我們來看fadein函式的第一版的寫法：先了解一下實現的思路

function fadein(ele, speed) 


}, 30);


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

要解決這個問題，目前有乙個方案：新增乙個全域性狀態，防止多次觸發setinterval。

let fadeflag = true;


function fadein(ele, speed) 


}, 30);


}}複製**
先看**

set: function(elem, 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）

(function


() fade.prototype = ,


setopacity: function(num) ,


fadein: function(speed, opacity)


}, 20);}},


fadeout: function(speed, opacity) 


}, 20);}}


};window.fade = fade;


})();


複製**
測試例項：

let btn = document.getelementsbytagname('button')[0];


let btn2 = document.getelementsbytagname('button')[1];


btn.onclick = () => ;


btn2.onclick = () => 


複製**

原生javascript上傳檔案外掛程式封裝

封裝函式的 function uploadfile options 建立xmlhttprequest物件 判斷在呼叫的時候有沒有傳入這兩個函式引數，防止報錯 var success options.success function var error options.error function 設...

封裝原生ajax

封裝原生ajax四個步驟 類似於手機打 建立xmlhttprequest物件 買手機 開啟與伺服器的連線 撥號 傳送到伺服器 按下撥號鍵 等待伺服器的響應 有可能關機，不在服務區，無人接聽，有人接聽 function ajax obj else data user xiaocuo age 23 if...

原生js ajax 封裝

首先我們先了解ajax的get和post請求分別是怎樣請求資料的 get請求 建立ajax例項 開啟需要請求的位址，可以有三個引數 參1 請求方式 參3 是否非同步，可選，預設非同步 向後端傳送的資料，get方式用不到 ajx.onreadystatechange post請求 建立ajax例項 開...