Question

他们是如何制作这个页面的？ http://www.youtube.com/wariolandshakeit2008

如果有人有关于如何做这样的事情的教程，请告诉我！

Answer 1

看起来整个事情对我来说都是一部Flash电影。此网址嵌入了iframe：http://1q1gafmnta4fm0riakrenq213o0sa9p9.ig.gmodules.com/ig/ifr?url=http://facebook.gspsf.com/~wii/wariolandshakeit2008/gadget_files_040209/google_gadget.xml&lang=en&hl=en_US

事实上，这是SWF：http://facebook.gspsf.com/~wii/wariolandshakeit2008/gadget_files_040209/main.swf

Answer 2

注意：无论出于何种原因，我认为效果使用与铬重力实验相同的js技巧。

虽然这似乎是在flash中实现的，但是可以使用新的html5来完成类似的事情。

通常情况下，没有什么可以阻止您自己下载所有的JavaScript源代码并尝试弄清楚发生了什么。另请查看existing Javascript physics engines和Chrome experiments，例如this one

如果你在重力实验中深入研究源代码，你会发现两件重要的事情：

它使用box2d javascript引擎
使用这些陈述修改坐标 - 更重要的是元素的旋转

-

for (i = 0; i < elements.length; i++)
{
    var element = elements[i];

    element.style['left'] = (bodies[i].m_position0.x - (properties[i][2] >> 1)) + 'px';
    element.style['top'] = (bodies[i].m_position0.y - (properties[i][3] >> 1)) + 'px';

    // webkit
    element.style['-webkit-transform'] = 'rotate(' + (bodies[i].m_rotation0 * 57.2957795) + 'deg)';

    // gecko
    element.style['MozTransform'] = 'rotate(' + (bodies[i].m_rotation0 * 57.2957795) + 'deg)';

    // opera
    element.style['OTransform'] = 'rotate(' + (bodies[i].m_rotation0 * 57.2957795) + 'deg)';
}

Answer 3

这很酷 - 我无法解释它是如何做到的，但是如果你右键点击页面正文中的任何地方，你会发现它全是闪光灯。

你如何让一个网页“崩溃”（就像在Youtube上的Wario Shake it ad）？

3 个答案: