html火箭动态显示原理剖析

叨逼逼

设计个人简历时，我遇到的第一个问题就是如何让我的小火箭动起来。

设计历程

一开始，我的思路是：将火箭每一帧图片的url保存为一个字符串数组，然后使用JS对div标签的background-image属性进行更改切换，以达到让火箭动起来的目的。

之后，我阅读Robby Leonardi个人简历时发现，他让小人动起来的原理是这样的：

正如原理图所示，所有帧的图片合成一张大的图片，而且帧与帧之间没有间隙，我是为了方便观看而加上的间隙。图片在网页中的可见范围正好为一张图片大小。

这里需要两个div块。一个div块表示可见范围，我暂且叫它可见范围块。可见范围块内嵌入一个div块，这个div块我叫它动画图片块。Ps：可见范围块要设置宽高为一帧图片的大小，并且overflow设置成hidden。

设置一个interval的计数器，固定时间改变图片块的位置。使下一帧图片处于与可见范围块重合的位置。当切换到最后一帧时，循环切换回第一帧。所以，这样就实现了让小人动起来。

最终成果

我所做的最终结果如下图所示。

火箭图片

JS代码