空间就全凭CSS的绝对定位实现位移了。在开始之前，我们练习一下setTimeout的递归用法（用来模拟setInterval）。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载复制代码代码如下:function text(el){var node = (typeof el == "string")? document.getElementById(el) : el;var i = 0;var repeat = function(){setTimeout(function(){node.innerHTML = ""+i+"";i++;if(i setTimeout(arguments.callee, 100);}},100)}repeat();}我们来试一下最简单的淡入特效，就是把node.innerHTML那一行改成透明度的设置。
复制代码代码如下:function fadeIn(el){var node = (typeof el == "string")? document.getElementById(el) : el;var i = 0;var fade = function(){setTimeout(function(){!+"\v1"? (node.style.filter="alpha(opacity="+i+")"): (node.style.opacity = i / 100);i++;if(i setTimeout(arguments.callee, 100);}},100)}fade();}但是这样并不完美，因为IE的滤镜可能会在IE7中失效，我们必须要用zoom=1来激活hasLayout。我们再添加一些可制定参数扩充它。注释已经非常详细，不明白在留言里再问我吧。
复制代码代码如下:function opacity(el){//必选参数var node = (typeof el == "string")? document.getElementById(el) : el,//可选参数options = arguments[1] || {},//变化的持续时间duration = options.duration || 1.0,//开始时透明度from = options.from || 0.0 ,//结束时透明度to = options.to || 0.5,operation = 1,init = 0;if(to - from operation = -1,init = 1;}//内部参数//setTimeout执行的间隔时间，单位毫秒var frequency = 100,//设算重复调用的次数count = duration * 1000 / frequency,// 设算每次透明度的递增量detal = Math.abs(to - from) /count,// 正在进行的次数i = 0;var main = function(){setTimeout(function(){if(!+"\v1"){if(node.currentStyle.hasLayout) node.style.zoom = 1;//防止滤镜失效node.style.filter="alpha(opacity="+ (init * 100 + operation * detal * i * 100).toFixed(1) +")"}else{node.style.opacity = (init + operation * detal * i).toFixed(3)}node.innerHTML = (init + operation * detal * i).toFixed(3) i++;if(i setTimeout(arguments.callee, frequency);}},frequency)}main();}
效果演示：
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]但上面并不尽善尽美，有一个Bug。我们是通过短路运算符来决定是否使用默认参数还是我们传入的参数，但在javascript中，数字0甚至0.0都会自动转换为false。因此在第个例子，如果我们在to中传入0，它永远不会用到这个0，而是默认的0.5。解决方法让它变成字符串“0”。另，参数i也不是必须的，我们可以省去它，用count负责所有的循环，但这样一来，我们的思维就要逆过来想了。原来是加的，我们要变成减的。
复制代码代码如下:function opacity(el){//必选参数var node = (typeof el == "string")? document.getElementById(el) : el,//可选参数options = arguments[1] || {},//变化的持续时间duration = options.duration || 1.0,//开始时透明度from = options.from || 0.0 ,//结束时透明度to = (options.to && options.to + "") || 0.5,operation = -1,init = 1;if(to - from operation = 1,init = 0;}//内部参数//setTimeout执行的时间，单位var frequency = 100,//设算重复调用的次数count = duration * 1000 / frequency,// 设算每次透明度的递增量detal = operation * Math.abs(to - from) /count;var main = function(){setTimeout(function(){if(!+"\v1"){if(node.currentStyle.hasLayout) node.style.zoom = 1;//防止滤镜失效node.style.filter="alpha(opacity="+ (init * 100 + detal * count * 100).toFixed(1) +")"}else{node.style.opacity = (init + detal * count).toFixed(3)}count--;if(count + 1){setTimeout(arguments.callee, frequency);}},frequency)}main();}进一步优化，利用原型共享方法。
复制代码代码如下:function Opacity(el){var node = (typeof el == "string")? document.getElementById(el) : el,options = arguments[1] || {},duration = options.duration || 1.0,from = options.from || 0.0 ,to = (options.to && options.to + "") || 0.5,operation = -1,init = 1;if(to - from operation = 1,init = 0;}var frequency = 100,count = duration * 1000 / frequency,detal = operation * Math.abs(to - from) /count;this.main(node,init,detal,count,frequency);}Opacity.prototype = {main : function(node,init,detal,count,frequency){setTimeout(function(){if(!+"\v1"){if(node.currentStyle.hasLayout) node.style.zoom = 1;//防止滤镜失效node.style.filter="alpha(opacity="+ (init * 100 + detal * count * 100).toFixed(1) +")"}else{node.style.opacity = (init + detal * count).toFixed(3)}node.innerHTML = (init + detal * count).toFixed(3) count--;if(count + 1){setTimeout(arguments.callee, frequency);}},frequency)}}
演示代码：
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]