有人知道 Google 奥运会互动涂鸦是如何工作的吗？ http://www.google.com/doodles/soccer-2012
我发现 Div 是 hplogo 并且样式就在它的正上方，例如：
#hplogo{background:url(/logos/2012/soccer12-hp.png)....
我无法弄清楚分数是如何计算的；对象如何移动等。它是一个可读的 JS 文件吗？提前致谢。
真诚的， 一位开发者
问问题
3187 次
2 回答
6
你知道如何用调试器查看页面源代码吗？在谷歌浏览器中，只需点击F12. 打开调试器，您可以看到文件。您会注意到一个JavaScript 文件。您可以通过清理它使其更具可读性，但它将是压缩的变量名。
于 2012-08-10T19:18:58.887 回答
6
一些涂鸦使用 Canvas 来显示动画。从加载的图像中提取的不同帧是使用 javascript 中的计时器绘制的。
有些使用 CSS 属性background-image。使用 javascript 计时器更改CSS 属性background-position以创建动画。
动画使用更多的 javascript 进行交互。
例如：http ://www.google.com/logos/2012/hurdles12-hp-sprite.png , http://www.google.com/logos/2012/basketball12-hp-anim.png
于 2012-08-10T19:28:46.733 回答