JavaScript 动画 2---透明度动画

时间 2019-11-17

原文原文链接

1、要点

一、setIntervalhtml

二、 oDiv1.style.filter ='alpha(opacity:'+alpha+')'; //IE
oDiv1.style.opacity = alpha/100; //满值为1 因此除以100spa

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,div{
				margin:0;
				padding:0;
			}
			#div1{
				width:200px;
				height:200px;
				background:red;
				filter:alpha(opacity:20); /*IE*/
				opacity:0.2;
			}
		</style>
		<script>
			window.onload =function(){
				var oDiv1 = document.getElementById('div1');
				
				oDiv1.onmouseover = function(){
					startChange(100);
				}
				oDiv1.onmouseout = function(){
					startChange(20);
				}
				
			}
			
			var timer = null; //设置定时器
			var alpha = 20; //定义初始透明度
			function startChange(iTarget){
				var oDiv1 = document.getElementById('div1');
				clearInterval(timer);
				timer = setInterval(function(){
					var speed = 0;
					if(alpha>iTarget){
						speed = -10;
					}else{
						speed = 10;
					}
					if(alpha == iTarget){
						clearInterval(timer); //达到目标值中止定时器
					}else{
						alpha +=speed;
						oDiv1.style.filter ='alpha(opacity:'+alpha+')'; //IE
						oDiv1.style.opacity = alpha/100;  
						//满值为1
					}
				},30)
				
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>