目錄
3.3 淡入效果 --- 仿jQuery中的fadeIn()函數
3.4 淡出效果 --- 仿jQuery中的fadeOut()函數
3.5 淡入/淡出效果 --- 仿jQuery中的fadeToggle()函數
一、前言
一提到淡入淡出效果，大家可能會想到jQuery的fadeIn(),fadeOut()和fadeToggle()函數，它們被封裝到庫中，很方便被調用。但是有時候只爲了一個簡單的淡入淡出效果，並不需要去調用龐大的jQuery庫，所以，下面我們用純js代碼實現淡入淡出的效果。需要注意的是，obj.style.xxx 只能獲取HTML標籤中的style屬性的樣式信息，無法獲取外聯和內聯中的樣式信息。
二、需求分析
要實現淡入淡出效果，就是要使用到setInterval()函數，改變element節點透明度opacity，來解決這個問題。
三、功能實現
3.1 HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生JS實現jQuery淡入淡出效果</title>
<script src="mainEvent.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#testBox{
width: 200px;
height: 200px;
background-color: #009E94;
opacity: 1;
}
</style>
</head>
<body>
<button id="fadeInBtn">淡入</button>
<button id="fadeOutBtn">淡出</button>
<button id="fadeToggleBtn">淡入/淡出</button>
<div id="testBox"></div>
</body>
</html>
3.2 JavaScript初始化代碼
window.onload = function() {
var fadeInBtn = document.getElementById("fadeInBtn");
var fadeOutBtn = document.getElementById("fadeOutBtn");
var fadeToggleBtn = document.getElementById("fadeToggleBtn");
var testBox = document.getElementById("testBox")
fadeInBtn.onclick = function() {
fadeIn(testBox);
}
fadeOutBtn.onclick = function() {
fadeOut(testBox);
}
fadeToggleBtn.onclick = function(){
fadeToggle(testBox);
}
}
3.3 JavaScirpt淡入效果 --- 仿jQuery中的fadeIn()函數
function fadeIn(elemt, speed) { //淡入 0 ~ 1
if(elemt.style.opacity == 0 && elemt.style.opacity != "") {
var speed = speed || 16.6; //默認速度爲16.6ms
var num = 0; //累加器
var timer = setInterval(function() {
num++;
elemt.style.opacity = num / 20;
if(num >= 20) {
clearInterval(timer);
}
}, speed);
}
}
3.4 JavaScirpt淡出效果 --- 仿jQuery中的fadeOut()函數
function fadeOut(elemt, speed) { //淡出 1 ~ 0
if(elemt.style.opacity == 1 || elemt.style.opacity == "") {
var speed = speed || 16.6; //默認速度爲16.6ms
var num = 20; //累剪器
var timer = setInterval(function() {
num--;
elemt.style.opacity = num / 20;
if(num == 0) {
clearInterval(timer);
}
}, speed);
}
}
3.5 JavaScript淡入/淡出效果 --- 仿jQuery中的fadeToggle()函數
function fadeToggle(elemt, speed) {
var speed = speed || 16.6; //默認速度爲16.6ms
if(elemt.style.opacity == 0 && elemt.style.opacity != "") {
var num = 0; //累加器
var timer = setInterval(function() {
num++;
elemt.style.opacity = num / 20;
if(num >= 20) {
clearInterval(timer);
}
}, speed);
}else if(elemt.style.opacity == 1 || elemt.style.opacity == "") {
var num = 20; //累剪器
var timer = setInterval(function() {
num--;
elemt.style.opacity = num / 20;
if(num == 0) {
clearInterval(timer);
}
}, speed);
}
}
四、最終效果
五、修改後的最終版本
/*
* 參數說明
* element:需要淡入的元素
* speed:淡入速度,正整數(可選)
*/
window.Fade = (function() {
// 定義Fade對象,外部訪問接口對象
var Fade = {
fadeIn: function(elemt, speed) { //【 上拉接口 】
TimerManager.creatObject(fadeIn, elemt, speed);
return this;
},
fadeOut: function(elemt, speed) { //【 下拉接口 】
TimerManager.creatObject(fadeOut, elemt, speed);
return this;
},
fadeToggle: function(elemt, speed) { //【 滑動切換接口 】
TimerManager.creatObject(fadeToggle, elemt, speed);
return this;
}
};
// II.構造對象記錄計時器和動畫狀態
// 1） 定時器管理器構造函數
function TimerManager(args) {
this.func = args[0];
this.elemt = args[1];
this.speed = args[2] != 0 && args[2] != undefined && args[2] != null ? args[2] : 500;
this.isStart = false;
}
// 2）定時器管理器的靜態方法：爲element添加一個TimerManager實例
TimerManager.creatObject = function(funcName, elemt, speed) {
// 如果elemt對象沒有TimerManager屬性,或者該屬性值不是TimerManager,則就爲其添加或更換一個
if(!elemt.TimerManager || elemt.TimerManager.constructor != TimerManager) {
elemt.TimerManager = new TimerManager(arguments);
}
// 判斷該elemt對象的計時器是否啓動,如果沒有啓動，則啓動，並執行動畫，執行完畢之後修改計時器狀態
if(!elemt.TimerManager.isStart) {
if(elemt.TimerManager.func.constructor != funcName) {
elemt.TimerManager.func = funcName;
}
elemt.TimerManager.isStart = true;
elemt.TimerManager.func(elemt, speed)
}
}
// III.執行函數
// 1）淡入函數
function fadeIn(elemt, speed) { //淡入 0 ~ 1
if(getStyle(elemt, "display") == "none"){
elemt.style.cssText = "display:block;opacity:0;";
var speed = speed || 500; //執行總時間
var timeSpeed = speed / 100; //速度
var num = 0,opacNum;
var timer = setInterval(function() {
// 修改透明度
opacNum = Number(elemt.style.opacity);
elemt.style.opacity = opacNum + 0.01;
num += timeSpeed;
if(num >= speed) {
clearInterval(timer);
elemt.TimerManager.isStart = false;
}
}, timeSpeed);
} else {
elemt.TimerManager.isStart = false;
}
}
// 2）淡出函數
function fadeOut(elemt, speed) { //淡出 1 ~ 0
if(getStyle(elemt, "display") == "block"){
var speed = speed || 500; //執行總時間
var timeSpeed = speed / 100; //速度
var num = 0,opacNum;
var timer = setInterval(function() {
// 修改透明度
opacNum = Number(elemt.style.opacity) || Number(getStyle(elemt, "opacity"));
elemt.style.opacity = opacNum - 0.01;
num += timeSpeed;
if(num >= speed) {
clearInterval(timer);
elemt.TimerManager.isStart = false;
elemt.style.cssText = "display:none";
}
}, timeSpeed);
} else {
elemt.TimerManager.isStart = false;
}
}
// 3）切換函數
function fadeToggle(elemt, speed) { //切換
var speed = speed || 16.6; //默認速度爲16.6ms
if(getStyle(elemt, "display") == "none"){
fadeIn(elemt, speed);
}else if(getStyle(elemt, "display") == "block"){
fadeOut(elemt, speed);
}
}
return Fade;
})();
結果演示
