简明现代魔法 -> JavaScript -> Google 首页纪念牛顿特效

Google 首页纪念牛顿特效

2010-01-04

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

效果演示

gudao

 

 

 

 

 

 

 

 

源代码

<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就是这样,用简单的技术实现令人惊叹的效果。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们