浏览 1428 次
|
锁定老帖子 主题：写个fade练下手
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-02-18
<!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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
