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

另外，也提供一种偏门方法，可以通过设置元素的border，使其颜色为网页背景色，视觉上表现为不可见，就可以作为和margin同样的效果来使用了，这里就不写代码了。子不语怪力乱神，对于一些偏门技巧，奇巧淫技，笔者向来是不推崇的，比如一些花俏的hack技术，并不像一些人所认为的有什么很高的技术含量，了解即可，不可执迷于此以至走火入魔堕入歧途。这里扯点野棉花，讲一段看来的故事。话说西域明教圣火令上的旁门武功，可谓奇巧诡谲；少林的九阳神功，可谓武林正宗淳正至极。狭路相逢，两种武功交上手，张无忌独对明教风云三使的时候，虽然开始输于招式略占下风，然而，情急中张无忌速成圣火令武功，并以九阳神功的纯正内力御使出来，马上扭转了战局，打败了风云三使。可见，招式技巧可以速成，苦练纯正的内功才是正途。写代码也是，只有练就了扎实的基本功，才能以拙御巧，无往不胜。

在我所见过的JavaScript位移动画中，使用最多的是设置定位属性top/right/bottom/left和scrollTop/scrollLeft的方式。JavaScript框架中的位移动画效果都是通过设置定位属性来实现，因为需要良好的通用性。而大部分的前端开发者本身是程序员出身，对CSS的开发并不太熟悉，因此采用了JavaScript提供的scrollTop/scrollLeft属性来实现动画。这些方式其实也没有绝对的优劣之分，根据实际情况灵活选用即可。受到的一点启发是，良好的CSS基础对于前端开发人员来说，能够拓展一些开发思路。

以上分析了位移动画的几种基本模型，可以在此基础上进行一些算法的设计，实现无缝滚动等效果，还可以在数值递增/递减中设置加速度，设置阻尼系数，就可以做出非常灵动，仿真的动画了。总之，一通百通，万变不离其宗。