`
enix2212
  • 浏览: 25229 次
  • 性别: 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>

分享到:
评论

相关推荐

    Fade in pro 3.0562 for Mac

    总的来说,Fade In Pro 3.0562是Mac用户理想的剧本编写工具,它的强大功能和友好界面为编剧提供了一个高效的创作环境。无论是独立创作者还是团队协作,都能从中受益。通过简单的安装和激活步骤,用户可以快速开始...

    行业教育软件-学习软件-fade in pro剧本软件 3.0.578.zip

    这款3.0.578版本的软件,集成了诸多功能,旨在帮助用户提升创作效率,同时提供了一个全面的剧本格式化工具,以满足电影、电视、舞台剧等多种剧本格式的需求。 一、剧本写作的利器 Fade In Pro的核心优势在于其强大...

    易语言—打造电音FADE

    总结来说,这个项目利用易语言结合MIDI文件,通过编程实现了电音FADE效果,同时提供了丰富的学习资源,包括代码实例、图像示例和在线教程,旨在帮助用户掌握这一技能。无论是对音乐制作感兴趣,还是希望深入学习...

    android 屏幕保护程序--------Fade In 与 Fade Out 特效与运行线程

    在Android平台上,开发一款屏幕保护程序(也称为屏保或壁纸)可以为用户提供个性化的体验。...通过分析和学习这个示例,开发者可以更好地理解和实践Android屏保中的Fade In和Fade Out特效以及多线程的应用。

    Mouseover Fade Effect.zip

    "Mouseover Fade Effect.zip" 是一个压缩包,其内容很可能包含了一个关于网页设计中鼠标悬停淡入效果的实现教程或代码示例。这个效果通常用于提升用户交互体验,当用户将鼠标指针悬停在特定元素上时,该元素会逐渐变...

    FadeOutBottom.rar_Fade Out

    Fade Out Bottom——是一款在网页底部产生淡入淡出效果的JavaScript插件,不管显示在网页底部的是文字或是图片,它都将其修饰为渐变的淡入淡出风格,拖动网页的滚动条之后,它仍会将显示在最底部的内容变为淡入淡出...

    用matlab写一段代码-fade:听觉歧视实验的仿真框架

    用matlab写一段代码FADE-听觉歧视实验的仿真框架 该软件可用于对简单的声学识别,检测和鉴别实验进行建模。 主要作者:2014-2020年MarcRenéSchädler电子邮件: 该软件包中提供的脚本可用于执行[1]和[2]中所述的...

    fade.rar_fade函数_多径延迟信道_多径瑞丽衰落_多径衰落信道_瑞丽多径信道

    "fade.rar_fade函数_多径延迟信道_多径瑞丽衰落_多径衰落信道_瑞丽多径信道"这个压缩包文件显然是针对无线通信中的多径衰落现象进行模拟和分析的资源集合。下面我们将详细讨论这些知识点。 首先,"fade"函数通常是...

    Spark Effects 动画效果 Fade 渐变 淡入淡出 组件改变大小

    首先,我们需要引入Spark Effects库,然后创建一个Fade实例,指定目标组件和所需的参数。例如,如果要使一个名为`myComponent`的组件淡入,代码可能如下所示: ```actionscript import mx.effects.Fade; var fade...

    Fade2back

    "Fade2back"是一个与字体相关的项目,从提供的信息来看,它可能是一个定制或独特的字体设计,或者是某种字体效果的实现。"Fade2back"这个名字可能暗示了字体具有淡入淡出的效果,或者是一种复古风格的设计,这在视觉...

    Arduino项目开发 Basics_Fade_Fade.pdf

    本篇将深入讲解一个基础但实用的Arduino项目——Fade(渐变)效果,通过控制LED灯亮度的平滑变化,展现模拟输出(analogWrite)功能的魅力。 首先,我们来看代码的关键部分: ```cpp int led = 9; // 定义LED连接...

    jQuery写fadeTo示例代码

    标题和描述中提到的知识点是“jQuery写fadeTo示例代码”,这一部分主要涵盖了如何使用jQuery库中的fadeTo()函数来实现一个图片的淡入淡出效果。 在jQuery中,fadeTo()函数是一个动画方法,它可以用来改变选定元素的...

    fade_diversity.rar.rar_diversity_fade_matlab中rayleigh_rayleigh分布

    本资料包“fade_diversity.rar.rar_diversity_fade_matlab中rayleigh_rayleigh分布”专门针对这种衰落模型进行研究,通过MATLAB语言来实现Rayleigh分布的模拟。 Rayleigh分布是描述平坦衰落信道中幅度分布的一种...

    基于directx制作的C++Windows桌面程序游戏Fade

    总的来说,Fade这款游戏展示了DirectX在C++游戏开发中的应用,涵盖了图形渲染、性能优化、资源管理等多个方面,对于想要深入学习游戏开发的程序员来说,是一个宝贵的实践案例。同时,开源的源代码为学习者提供了亲自...

    前端开源库-glsl-transition-fade

    在WebGL中,每个像素的颜色值可以通过着色器程序进行计算,fade函数就是这样一个计算过程,它会根据时间变量逐渐改变像素的颜色,从而实现从一个图像淡出到另一个图像的效果。 在实际应用中,开发者可以将这个库...

    flex AS自定义fade效果

    本文将详细介绍如何通过Flex结合ActionScript来自定义实现一个fade(淡入淡出)效果,并通过循环该效果来实现闪烁功能。 #### 一、Fade效果原理介绍 Fade效果通常指的是元素透明度的渐变变化。在Flex中,可以利用...

    eediugcted.rar_fade_giins_giins.m_girem

    标题中的"eediugcted.rar_fade_giins_giins.m_girem"看起来像是一个被部分混淆的文件名,不过我们可以看到关键词"fade", "giins", "girem",这些都是与无线通信中信号处理相关的术语。描述中提到的是在QPSK(四相...

    Simulation of capacity fade in lithiumion batteries.pdf

    根据提供的文件信息,我们可以从中提炼出与锂离子电池容量衰减模拟相关的几个关键知识点: ### 锂离子电池容量衰减的概念 锂离子电池是目前电动汽车(EV)中最常用的储能装置之一。随着时间的推移和充电循环次数的...

    图像去雾质量评价源码Referenceless Prediction of Perceptual Fog Density and Perceptual Imag

    总的来说,这个源码包提供了一个无参考的图像去雾质量评估系统FADE,它包括了核心算法实现、辅助函数、测试图像和特征数据。通过这个系统,研究人员和开发者可以对各种去雾算法的效果进行客观和准确的评估,推动图像...

    text-fade-effect

    标题“text-fade-effect”指的是一个网页特效,它利用HTML、CSS和JavaScript技术来实现文本的淡入淡出效果。这种效果通常用于增强网站的视觉吸引力,提高用户体验,特别是当用户滚动页面时,文本能够以平滑的方式...

Global site tag (gtag.js) - Google Analytics