JavaScript页面元素位移动画的几种实现

网页设计开发中，我们有时会在页面上放置一些动画元素，如滚动、切换、收缩、渐隐等效果，一方面吸引用户注意，增强交互性，另一方面可以有效地运用网页空间，在有限的空间内展示更多内容。然而，这类效果往往存在一些可用性问题，用Flash或者浏览器脚本来实现这类效果决定了对客户端软件环境的依赖性，增加了运行风险；同时，动画的速度、频率以及用户的可操作性也都需要进行细致地设计才能保持良好的用户体验。本文暂且抛开对其利弊的权衡不谈，仅仅是从前端开发的角度尝试探讨一下使用JavaScript和CSS技术实现页面元素位移动画（也即是常说的滚动）的几种方式。

所谓网页动画，可以概括成元素的物理属性相对于时间发生改变。这些物理属性包括高度，宽度，位置，可见性，透明度等，每种物理属性的改变都对应一类动画，也可以将多个效果进行组合，创造出更加动感的效果。有了需要控制的物理属性，还需要某种方式能对时间量进行精确控制，JavaScript提供了两个方法来对时间进行设置，setTimeout()和setInterval(),这两个方法都能精确设置一段时间间隔后执行某段程序(具体用法可参考相关手册)，并且通过递归调用的方式两者的功能可以互相模仿，在制作动画中使用任意一个都是可行的。

本文将要探讨的位移动画仅需要对元素的位置属性进行控制，这就需要回顾一下页面布局相关的一些CSS知识。直接影响一个元素（元素是相对于页面整体而言，也可以说是标签容器）在页面中的位置的样式属性主要包括，元素自身的外边距margin，元素父级容器的内边距padding，元素的浮动方式float，元素的定位属性top/right/bottom/left。这些属性中，float的属性值是枚举类型，仅有三个给定的值可选：left/right/none，其他的属性则是数值加单位的范围值，如“12px”、“-100px”，可以有无数个取值，并且可以很方便地通过脚本程序的循环对数值部分进行递增或递减处理，这样就非常适合来实现渐变动画。另外，JavaScript也提供了两个元素属性scrollLeft/scrollTop，控制元素向左/上卷起的像素值，从而影响其内部元素的位置，也常被用来实现位移动画。