写个fade练下手

最新推荐文章于 2020-05-01 08:13:49 发布

最新推荐文章于 2020-05-01 08:13:49 发布 · 118 阅读

文章标签：

#JavaScript #XHTML #HTML #ViewUI

javaScript 专栏收录该内容

21 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div id="abc" style="background-color:red; width:400px; height:300px;"></div>
<div id="def" style="background-color:black; width:400px; height:300px;"></div>
<script>

function Fade(type,delay,callback){
	var it=delay || 10 ,time,a=0,b=100,that=this;
	function set(i){
		this.style.filter ="alpha(opacity=" + i + ")";
		this.style.opacity= i/100;
	}
	function clear(){
		clearInterval(time);
		if(callback){
			callback.call(this);
		}
	}
	({
		'in':function(){
			set.call(that,0);
			time=setInterval(function(){
				a++;
				if(a<=100){
					set.call(that,a);
				}else{
					clear.call(that);
				}
			},delay)
		},
		'out':function(){
			set.call(that,100);
			time=setInterval(function(){
				--b
				if(b>=0){
					set.call(that,b);
				}else{
					clear.call(that);
				}
			},delay)
		}
	}[type])();
	arguments.callee.init=function(a){
		set.call(this,a);
	} 
}

var d=document.getElementById('abc');
var e=document.getElementById('def');
Fade.call(d,'out',10,function(){
	Fade.call(d,'in',15,function(){
		Fade.call(d,'out',10,function(){
			Fade.call(d,'in',15,function(){
				Fade.call(e,'in',15,function(){
					setTimeout(function(){
						alert('end');
					},500);
				});
			});
		});
	});
});
Fade.init.call(e,0);
</script>
</body>
</html>