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

核心提示： 下面地址的实例分别演示了用margin，padding，JavaScript页面元素位移动画的几种实现(2)，left，scrollLeft四种方式实现页面元素的位移动画：请点击：演示地址 （点开后可直接查看分析源代码）Available for IE5.0/IE5.5/IE6/IE7/I

下面地址的实例分别演示了用margin，padding，left，scrollLeft四种方式实现页面元素的位移动画：

请点击：演示地址 （点开后可直接查看分析源代码）

Available for IE5.0/IE5.5/IE6/IE7/IE8 & anyother modern browsers.

示例中用不同方式实现了相同的效果，殊途同归。通过查看源码，我们可以看出以下特点：

margin，padding，left的值都是带“px”单位的字符串，在读取这类值进行数学操作的时候，需要用到函数parseInt()进行提取数值，对其数值部分进行递增或递减操作后，还需要进行一个字符串合并 int+“px”然后赋值给它的样式属性；而scrollLeft属性值是不带单位的数值，直接对它进行数学运算即可，从这点看，使用scrollLeft来进行程序处理似乎要方便。

scrollTop/scrollLeft的取值是有固定范围的，最小为0，最大为子元素的高宽超出父元素高宽的像素数值，可参考https://developer.mozilla.org/en/DOM/Element.scrollLeft。也就是说，用这个属性实现的动画是有范围限制的，子元素必须填满父元素，不能运动到让父元素内部出现间隙。另外，在子元素已经小于父元素的情况下，对父元素的scrollTop/scrollLeft进行设置将无效，恒为0，这个时候就无法通过此属性改变子元素的位置实现动画效果了。

padding和scrollTop/scrollLeft由于不能取负值，要实现双向动画需要进行一些变通，比如设置互为反向的padding:paddingLeft-paddingRight；scrollTop/scrollLeft没有对应的反向属性scrllBottom/scrollRight,可以通过设置起始位置再来递增/递减进行模拟。定位属性top/right/bottom/left和margin则都可以直接取负值，能很方便地实现双向移动。但元素的margin属性和padding一样，像个步履沉重的中年人，它们的实际表现通常要受到其父母兄弟子女各级元素的影响，往往还会涉及到一些元素的layout属性（啊，让人闻之色变layout！这个跟大部分(浏览器兼容问题)有关的属性，请参见这篇文章的论述：http://bbs.blueidea.com/viewthread.php?tid=2636904），因此在使用它制作动画的时候也有一些局限，需要代码编写者胆大心细，具有比较深厚的CSS浏览器兼容功底。综上，定位属性top/right/bottom/left可以说是最为灵活的实现方式。