System.gc()

Java,C,Ruby,futbol and games

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  4 Posts :: 0 Stories :: 5 Comments :: 0 Trackbacks

Google于2010年1月4日在主页推出了特别的logo来纪念牛顿的诞辰,此logo的特别之处是当你静候几秒钟后,logo中的一个苹果会掉下来,很好的呼应了logo的主题。
我通过对其页面代码的查看,发现其写的很精致,下面节选关键的代码看一看:

HTML代码节选:


< br  clear =all  id =lgpd > <!-- 从下面开始 -->
< img  src ="/logos/newton10-apple.png"  style ="visibility:hidden" /> <!-- 预加载掉下来的那颗苹果的图片 -->
< href ="/search?q=isaac+newton&ct=newton10-tree&oi=ddle" > <!-- 苹果树logo图片 -->
  
< img  src =/logos/newton10-tree.jpg  width =384  height =138  border =0  alt ="Birthday of Sir Isaac Newton"  
    title
="Birthday of Sir Isaac Newton"  id =logo   style ="margin-top:-1.22em"  
    onload
=""   /></ a > <!-- logo的onload声明并调用了苹果下落函数,见后 -->
  
< img  id ="fall"  src ="/logos/newton10-apple.png"  style ="position:relative;right:248px;bottom:46px" /> <!-- 掉下来的那颗苹果的图片 -->
  
< noscript >
    
< style >
      #fall
{ bottom : -210px!important } /**浏览器不支持脚本则把苹果直接摆在地上**/
    
</ style >
  
</ noscript > <!-- 到这里结束 -->
  
< form

在logo的onload时间中的Javascript:
 1 setTimeout(function(){// 下落函数,2秒后会被调用
 2     var h=0;// 水平速度
 3     var v=1;// 垂直速度
 4     var f=document.getElementById('fall');// 那颗苹果的图片
 5     var i=setInterval(function(){// 单步下落函数,每25毫秒被调用一次
 6         if(f){
 7             var r=parseInt(f.style.right)+h;// 水平位移
 8             var b=parseInt(f.style.bottom)-v;// 垂直位移
 9             f.style.right=r+'px';
10             f.style.bottom=b+'px';
11             if(b>-210){// 未下落到-210
12                 v+=2// 模拟加速度,v'=at+v,at=常量=2
13             }else{// 已下落到-210
14                 h=(v>9)?v*0.1:0;// 落地后横向反弹的速度为垂直速度的0.1倍(理想情况下此比率固定)
15                 v*=(v>9)?-0.3:0// 0.3为每次反弹后剩下的速度百分比(不知是否符合非弹性碰撞规律?)
16             }
17         }
18     },25);
19     google.rein&&google.rein.push(function(){// 资源回收队列,rein是一个数组
20         clearInterval(i);
21         h=0;
22         v=1
23     })
24 },2000)

可以看到代码很好的模拟了重力加速度,让苹果的掉落更真实。
此Javascript还试图通过数组来收集待回收的资源,应该是用于随后释放(但我还未找到监听此数组的函数)。

一段游戏一样的代码,依然可以看出代码作者的用心和水平,读后可谓受益匪浅。
posted on 2010-01-05 16:40 unrealwalker 阅读(313) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: