首页 > 代码库 > JavaScript实现淡入淡出

JavaScript实现淡入淡出

2024-09-27 19:58:02   215人阅读

<!DOCTYPE html>
<html>
<head>
	<title>css动画</title>
</head>
<body>
<script type="text/javascript">
/**
 * 将e转化为相对定位的元素，使之左右“震动”
 * 第一个参数可以是元素对象或者元素的id
 * 如果第二个参数是函数，以e为参数，他将在动画结束时调用
 * 第三个参数指定e震动的距离，默认是5像素
 * 第四个参数指定震动多久，默认是500毫秒
 */
function shake( e , oncomplete , distance , time ){
	//句柄参数
	if(typeof e === "string")
		e = document.getElementById(e);
	if(!time)
		time=500;
	var orginalStyle = e.style.cssText;		//保存e的原始style
	e.style.position ="relative";			//使e相对定位
	var start = (new Date()).getTime();		//注意：动画的开始时间
	animate();		//动画开始

	//函数检查消耗的时间，并更新e的位置
	//如果动画完成，他将e还原为原始状态
	//否则，它更新e的位置，安排他自身重新运行
	function animate(){
		var now = (new Date()).getTime();	//得到当前时间
		var elapsed = now-start;			//从开始依赖消耗了多长时间
		var fraction = elapsed/time;		//是总时间的几分之几

		if(fraction < 1 ){					//如果话未完成
			//作为动画完成比例的函数，计算e的x位置
			//使用正弦函数将完成比例乘以4pi
			//所以，他来回往复两次
			var x = distance*Math.sin(fraction*4*Math.PI);
			e.style.left = x+"px";

			//在25毫秒后或在总时间的最后尝试再次运行函数
			//目的是为了产生每秒40帧的动画
			setTimeout(animate,Math.min(25,time-elapsed));
		}
		else{			//否则动画完成
			e.style.cssText = orginalStyle;		//恢复原有样式
			if(oncomplete)
				oncomplete(e);
		}
	}
}

/**
 * 以毫秒级的时间将e从完全不透明淡出到完全透明
 * 在调用函数时，假设e是完全不透明的
 * oncomplete是一个可选的函数，以e为参数，它将在动画结束时调用
 * 如果不指定time，默认是500毫秒
 * 该函数在IE中不能正常工作，但也可以修改的能工作
 * 除了opacity，IE使用非标准的filter属性
 */
function fadeOut( e , oncomplete , time ){
	if( typeof e ==="string")
		e = document.getElementById(e);
	if(!time)
		time = 500;

	//使用Math.sqrt作为一个简单的“缓存函数”来创建动画
	//精巧的非线性，一开始淡出的比较快，然后缓慢了一些
	var ease = Math.sqrt;

	var start = (new Date()).getTime();		//注意；动画开始的时间
	animate();								//动画开始

	function animate(){
		var elapsed = (new Date()).getTime()-start;		//消耗的时间
		var fraction = elapsed/time;					//总时间的几分之几
		if(fraction < 1) { 			//如果动画未完成
			var opacity = 1 - ease(fraction);		//	计算元素的不透明度
			e.style.opacity = String(opacity); 		//设置在e上
			setTimeout(animate,Math.min(25,time-elapsed));
		}else{
			e.style.opacity = "0";
			if(oncomplete) oncomplete(e);
		}
	}
}
</script>
<button onclick="shake(this,fadeOut)">淡入淡出</button>
</body>
</html>

　　

JavaScript实现淡入淡出


联系
我们