`
enix2212
  • 浏览: 24217 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

写个fade练下手

阅读更多
<!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>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics