标签：动态显示 一帧 可见 剖析 html 火箭 div 范围 图片

叨逼逼

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

设计历程

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

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

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

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

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

最终成果

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

标签：动态显示,一帧,可见,剖析,html,火箭,div,范围,图片
来源： https://blog.csdn.net/lym1748283017/article/details/100535566

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。