基于原生javascript的淡入淡出函数封装（兼容IE）

时间 2019-12-06

标签基于原生 javascript 淡入淡出函数封装兼容栏目 JavaScript 繁體版

原文原文链接

在开发的过程当中，咱们要作淡入淡出效果的话，咱们彻底可使用jQuery的fadeTo()方法。可是咱们的目的不仅是会用，而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。javascript

构建框架，基本没难度。css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>透明度函数的封装</title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background: red;
				margin: 50px auto;
				opacity: .3;
				filter: alpha(opacity:30);
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script src="toumingdu.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

编写javascript部分，主要难点是changeOpacity()函数。

window.onload = function (){
	var box = document.getElementById('box');
	box.onmouseover = function (){
		changeOpacity(this,100);
	}
	box.onmouseout = function (){
		changeOpacity(this,30);
		
	}
}
/**
 * 
 * @param {Object} box 要变化透明度的元素
 * @param {Object} target 透明度的目标值（100为最高）
 */
function changeOpacity(box,target){
	var opa;
	var speed;
	if(box.currentStyle){
		//判断浏览器类型，此类型为IE浏览器，即便IE不支持opacity属性，可是仍然能够获取值
		opa = box.currentStyle['opacity']*100;
	}
	else{//其余浏览器
		opa = getComputedStyle(box,false)['opacity']*100;
	}
	//透明度每次变化的值（步长），根据目标值和当前值的差来决定步长的正负
	target-opa>=0?speed=1:speed=-1;
	clearInterval(box.timer);
	box.timer = setInterval(function (){
		//目标值和当前值差值的绝对值大于等于步长的绝对值，设置透明度为当前值加步长
		if(Math.abs(target-opa)>=Math.abs(speed)){
			box.style.opacity=(opa+speed)/100;
			box.style.filter='alpha(opacity:'+(opa+speed)+')';
		}
		//目标值和当前值差值的绝对值小于步长的绝对值，剩余的距离一步到位，
		//设置透明度直接为目标值，同时清除定时器
		else{
			box.style.opacity=target/100;
			box.style.filter='alpha(opacity:'+target+')';
			clearInterval(box.timer);
		}
		//直接对透明度参数进行加步长的运算，避免每次都要获取当前透明度
		opa=opa+speed;
	},30);
}

这个透明度函数的原理在大致上是跟运动函数相同的。总结为三步：

一、获取当前值，根据目标值和当前值肯定步长；html

二、变化的过程，每次变化一个值（渐变更画和透明度其步长为不一样的值，而匀速动画和透明度步长为定值）；java

三、判断是否达到目标值，达到则清除定时器，结束。浏览器

因此若是原理弄不清楚能够看一下另外一篇文章javascript匀速动画和缓冲动画。框架

而在理解原理的状况下最大的难点应该是当前透明度的获取了（赋值比较简单）。获取透明度的值咱们要考虑两种状况：函数

一、IE，虽然在在IE下不支持opacity属性，可是咱们是能够经过box.currentStyle['opacity']获取到它的值的，同时咱们在写入的时候也会将给opacity的值写入css中，尽管IE不会由于opacity值的改变而变化透明度。测试

二、其余浏览器，其余浏览器是支持opacity属性，因此咱们操做相对简单了许多，写入和读取都针对opacity便可。动画

接下来细讲在IE浏览器中的操做：this

首先咱们的css文件中有两个属性值在咱们的操做中是有用的 opacity: .3; filter: alpha(opacity:30); 显然咱们很难获取filter属性中的opacity值（我不会！），可是若是咱们使用currentStyle来获取opacity是比较简单的。因此我进行了测试发现，尽管IE不支持这个属性，可是这个属性值的读取和写入时彻底没问题的，因此，问题就迎刃而解了！咱们经过opacity能够读取当前透明度，而后经过filter改变透明度，同时，咱们改变opacity的值（不只是为了兼容其余浏览器，同时咱们写入之后IE浏览器中在下次移入的时候还能够获取当前的透明度，不然的话获取的是初始的opacity值）。那么下面不就和动画那个问题同样了？