原生JavaScript实现jQuery中的fadeIn和fadeOut淡入/出效果

目录

一、前言

二、需求分析

三、功能实现

       3.1 HTML代码

       3.2 JavaScript初始化代码

       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;
})();

       结果演示

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值