google纪念牛顿特效

今天是英国伟大的数学家、物理学家艾萨克·牛顿（Isaac Newton）的诞辰，google为其做了纪念logo。Logo做的符合主题又生动俏皮，下面看图

图一

图二

图一中的苹果按照图二中的轨迹掉在地上，具体效果看这里不得不佩服logo设计师的想象力。

效果看到了，下面看一下是怎么实现的。先看下源码：

 

 

< img  src ="newton09-apple.png"  style ="visibility: hidden"  alt =""   />
< a  href =""  target ="_blank" >
  < img  src ="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);},2000)" /></ a >  
  < img  alt ="gudao"  id ="fall"  src ="newton09-apple.png"  style ="position: relative; right: 248px; bottom: 46px"   />
  < noscript >
         < style  type ="text/css" > #fall { bottom :  -210px !important ; } </ style >
  </ noscript >

 

 

（注：google的源代码是经过压缩的（原始代码请自行查看google页面源代码），以上代码经过格式处理并有轻微变动）

看了上面的代码您是不是已经感觉很简单，主要代码就是这一段

 

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);},2000) "

 

 

可能您会说“不就是一个图片上加了点js动画吗？”。是的，Google就是这样，用简单的技术实现令人惊叹的效果。

这是我提取出来的源代码，感兴趣的可以研究研究，或者按照自己的需求添加更炫的效果。