Google首页 苹果落地的效果怎么做的？

Question

1月4号首页LOGO很特别<img src=/logos/newton09-tree.jpg width=384 height=138 border=0 alt="艾萨克牛顿" title="艾萨克牛顿" id=logo  style="margin-top:-1.22em" onload="window.lol&&lol();setTimeout(function(){var h=0,v=1,f=document.getElementById('fall'),i=setInterval(function(){if(f){var r=parseInt(f.style.right)+h,b=parseInt(f.style.bottom)-v;f.style.right=r+'px';f.style.bottom=b+'px';if(b>-210){v+=2}else{h=(v>9)?v*0.1:0;v*=(v>9)?-0.3:0}}},25);google.rein&&google.rein.push(function(){clearInterval(i);h=0;v=1})},2000)"></a><img id="fall" src="/logos/newton09-apple.png" style="position:relative;right:248px;bottom:46px"/><noscript><style>#fall{bottom:-210px!important}</style></noscript>
以上代码没看明白  哪位给说说？

Answer 1

这就是一段javascript代码嘛.就是定时改变id为fall的css属性
right与bottom的值.这个值改变了,图片的位置就不断发生变化每2秒运行一次,每次运行时,以25毫秒进行改变.

Answer 2

弹两下也能搞定嘛,无非就是一个位置参数改变.设置当下降到某个值后,就向左(改变对象的left值),同时向上(改变对象的bottom值).
这就表示一个向上弹起的过程.当弹起达到某个设定值后,再向下落,也就是改变对象的bottom值(或top值)

Answer 3

打开页面后首先调用方法lol，这个方法是对window的扩展函数，然后2秒以后执行一大段js函数，函数的内容看上去像是一段动画效果。

Answer 4

window.lol && lol(); setTimeout(function() {
    var h = 0,
        v = 1,
        f = document.getElementById('fall'),
        i = setInterval(function() {
            //关键处
            if (f) {
                var r = parseInt(f.style.right) + h,
                    b = parseInt(f.style.bottom) - v;
                f.style.right = r + 'px';
                f.style.bottom = b + 'px';
                if (b > -210) {
                    //不断递增位移量--下降
                    v += 2
                } else {
                    //弹簧位移量
                    h = (v > 9) ? v * 0.1 : 0;
                    v *= (v > 9) ? -0.3 : 0
                }
            }
        }, 25);
    google.rein && google.rein.push(function() {
        //google.rein 应该是google的框架
        clearInterval(i); h = 0; v = 1
    })
}, 2000)