喜欢今天的Google LOGO 玛莎·葛兰姆

/52 评论/在： /通过：

今天找开google首页，google的logo就像一幅动画一样动了起来，是一种舞姿(葛兰姆式的舞蹈技法（Graham Technique）)，好看。挺感兴趣的，我还以为是gif图片呢。

来张截图先

喜欢今天的Google LOGO 玛莎·葛兰姆

不过google当然不会这么简单的。我弄了弄，把其中的代码给挖了出来。用了几句css，和两张png图片，还有一大段js script。就完成了今天的google logo的作品

Google LOGO 玛莎·葛兰姆 效果预览

先来看看效果哦。 不知直接把代码放进来有没有效果呢。先试一下吧。 不能在文章里实现效果。

效果： http://liucheng.name/wp-content/uploads/20110511googlelogo.html

[iframe height=”156″ width=”403″ src=”http://liucheng.name/wp-content/uploads/20110511googlelogo.html”]

Google LOGO 玛莎·葛兰姆 代码

两张图片：

http://www.google.com.hk/logos/2011/graham11-hp-start.png http://www.google.com.hk/logos/2011/graham11-hp-sprite.png

再来看看代码吧。

div部分

<div id=hplogo><a href="http://www.google.com.hk/search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&ct=graham11-hp&oi=ddle&hl=zh-CN" target="_blank"><img src="http://www.google.com.hk/logos/2011/graham11-hp-start.png" border=0 alt="现代舞先驱玛莎·葛兰姆 117 周年诞辰" title="现代舞先驱玛莎·葛兰姆 117 周年诞辰" /></a></div>

css部分

<style>#hplogo{background:white;cursor:pointer;height:156px;position:relative;width:403px}#hplogo div{pointer-events:none;position:absolute}</style>

js部分

这部分就看太懂了。反正全部放进来、会的童鞋就去研究研究了。

<script>(function(){try{if(!google.doodle)google.doodle={};var d=[[307,48,88,89],[307,48,89,89],[307,48,91,89],[305,49,93,89],[305,50,93,88],[305,50,93,88],[306,52,92,86],[305,53,93,84],[305,54,94,83],[306,54,93,83],[307,54,92,83],[307,54,92,83],[308,54,90,83],[308,54,90,83],[306,53,91,84],[306,53,91,84],[308,53,90,84],[308,53,90,84],[305,53,92,84],[305,52,92,85],[306,52,91,85],[308,51,88,87,1],[308,50,88,88],[308,49,88,88],[307,49,89,88],[307,50,89,87],[308,51,89,86],[307,54,90,83],[307,57,90,80],[306,58,92,79],[306,58,92,79],[305,60,92,77],[302,61,95,76],[302,63,95,74],[302,51,96,86],[302,66,98,71],[304,67,96,69],[301,63,96,74],[301,58,93,79],[291,52,94,85],[288,50,71,88],[285,43,76,95],[285,37,70,101],[281,29,55,109],[278,20,58,119],[278,20,55,119,1],[277,12,121,127],[271,2,122,138],[267,1,126,139],[264,0,136,140],[260,0,141,140],[255,0,148,140],[252,0,151,140],[249,2,121,138],[247,3,123,137],[246,3,123,137],[246,2,124,137],[258,2,112,137],[263,2,106,137],[263,2,106,137],[262,2,103,137],[260,2,104,136],[260,2,104,137,1],[268,2,98,137],[267,2,99,137],[266,2,97,137],[266,3,96,136],[264,3,99,136],[263,3,100,136],[261,3,100,136],[259,2,138,137],[254,2,126,137],[247,2,101,136],[240,2,108,136],[238,1,110,137],[230,1,118,138],[220,15,128,124],[211,18,137,121],[205,43,102,96],[202,45,104,93],[200,38,97,101],[198,38,104,101,1],[197,39,107,100],[197,39,112,100],[213,39,94,110],[212,40,95,111],[211,41,97,111],[209,42,99,112],[209,43,98,112],[213,43,87,112],[213,42,83,113],[211,40,86,109],[211,38,86,103],[211,37,88,112],[211,20,186,131],[213,27,167,122],[212,44,87,105],[210,44,88,98],[195,44,106,98],[189,44,110,98],[182,46,117,99],[173,44,118,96,1],[161,43,130,99],[154,42,137,97],[153,42,137,97],[153,42,137,97],[152,41,137,98],[151,41,137,97],[149,41,145,97],[148,25,144,114],[148,13,144,126],[141,12,153,127],[115,11,173,128],[108,7,180,133],[108,4,180,136],[108,3,176,137,1],[108,1,161,139],[105,1,235,138],[103,1,295,148],[103,0,277,149],[108,0,234,137],[101,0,232,137],[99,0,135,139],[95,0,244,139],[81,0,152,139],[69,0,164,139,1],[66,0,169,139],[65,0,170,139],[63,0,168,138],[61,0,159,138],[35,0,304,139],[19,0,189,140],[18,11,138,129],[18,11,137,129],[18,11,137,128],[18,6,135,133],[7,4,146,136],[6,4,147,136],[3,4,150,136,1],[3,5,150,135],[3,8,150,132],[4,6,394,145],[12,6,388,145],[11,8,389,144],[11,8,387,144],[11,8,387,143,1],[10,8,113,131],[11,8,111,131],[10,9,112,130],[12,9,116,130],[12,9,111,130],[12,9,111,130],[12,9,110,131],[12,34,113,106],[13,35,110,104]],e=d.length,f,g,h,i,j=-1,k=function(){google.nav&&google.nav.go?google.nav.go("http://www.google.com.hk/search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&ct=graham11-hp&oi=ddle&hl=zh-CN"):window.location.href="http://www.google.com.hk/search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&ct=graham11-hp&oi=ddle&hl=zh-CN"},l=function(){var a=d[f],c=document.getElementById("hplogo");if(c&&a[0]){var b=document.createElement("div");b.id="hplogo"+f;b.style.left=a[0]+"px";b.style.top=a[1]+"px";b.style.width=a[2]+"px";b.style.height=a[3]+"px";b.style.background="url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat "+-g+"px "+-h+"px";b.onmousedown=k;a[3]>i&&(i=a[3]);a[4]?(g=0,h+=i,i=0):g+=a[2];c.appendChild(b);++f;f< e&&(j=window.setTimeout(l,83))}},m=function(){google.doodle.a=!1;i=h=g=f=0;j!=-1&&(window.clearTimeout(j),j=-1);for(var a=0;a< e;++a){var c=document.getElementById("hplogo"+a);c&&c.parentNode&&c.parentNode.removeChild(c)}j=window.setTimeout(l,83)};if(!google.doodle.a){google.doodle.a=!0;var n=document.createElement("img");n.addEventListener?n.addEventListener("load",m,!1):n.attachEvent("onload",m);n.src="http://www.google.com.hk/logos/2011/graham11-hp-sprite.png"}}catch(o){google.ml(o,!1,{cause:"DOODLE"})};})();</script>

再多一段JS

原来上面的代码还缺少一些，上面的效果只能在chrome看，在IE和opera下没效果。在前面加多一段js就行了：

<script>window.google={kEI:"iyXKTdaxCIOycKDD0acG",kEXPI:"17259,24472,27147,28505,28555,29509,29685,29794,29822,30035,30107,30152",kCSI:{e:"17259,24472,27147,28505,28555,29509,29685,29794,29822,30035,30107,30152",ei:"iyXKTdaxCIOycKDD0acG",expi:"17259,24472,27147,28505,28555,29509,29685,29794,29822,30035,30107,30152"},authuser:0,ml:function(){},kHL:"zh-CN",time:function(){return(new Date).getTime()},


log:function(c,d,b){var a=new Image,e=google,g=e.lc,f=e.li;a.onerror=(a.onload=(a.onabort=function(){delete g[f]}));g[f]=a;b=b||"/gen_204?atyp=i&ct="+c+"&cad="+d+"&zx="+google.time();a.src=b;e.li=f+1},lc:[],li:0,


Toolbelt:{}};


 window.google.sn="webhp";var i=window.google.timers={};window.google.startTick=function(a,b){i[a]={t:{start:(new Date).getTime()},bfr:!(!b)}};window.google.tick=function(a,b,c){if(!i[a])google.startTick(a);i[a].t[b]=c||(new Date).getTime()};google.startTick("load",true);try{window.google.pt=window.external&&window.external.pageT;}catch(v){}


var _gjwl=location;function _gjuc(){var b=_gjwl.href.indexOf("#");if(b>=0){var a=_gjwl.href.substring(b+1);if(/(^|&)q=/.test(a)&&a.indexOf("#")==-1&&!/(^|&)cad=h($|&)/.test(a)){_gjwl.replace("/search?"+a.replace(/(^|&)fp=[^&]*/g,"")+"&cad=h");return 1}}return 0}function _gjp(){!(window._gjwl.hash&&window._gjuc())&&setTimeout(_gjp,500)};


window._gjp && _gjp()</script>

玛莎·葛兰姆 介绍

玛莎·葛兰姆 介绍

玛莎·葛兰姆（英语：Martha Graham，1894年5月11日－1991年4月1日），又译为马莎·格雷厄姆，美国舞蹈家和编舞家，也是现代舞蹈史上最早的创始人之一。

详细看百科吧

玛莎·葛兰姆_互动百科：http://www.hudong.com/wiki/%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86

瑪莎·葛蘭姆- 维基百科，自由的百科全书：http://zh.wikipedia.org/wiki/%E7%91%AA%E8%8E%8E%C2%B7%E8%91%9B%E8%98%AD%E5%A7%86

玛莎·葛兰姆，又译为马莎·格雷厄姆，美国舞蹈家和编舞家，也是现代舞蹈史上最早的创始人之一。葛兰姆出生于美国宾夕法尼亚州阿利根尼县。1910年代受到露斯·圣·丹尼斯的表演启发了对舞蹈的兴趣。

1916年，她进入萧恩舞团及舞蹈学校正式学习舞蹈。1926年，葛兰姆成立了自己的舞团，当时她独特的现代舞也影响了一部份的现代艺术。葛兰姆随后的演出奠定了她在现代舞蹈中的地位，并发展出葛兰姆式的舞蹈技法（Graham Technique）。

~完。

有点相关的文章

52 回复
  6. 代码狂人 says:

    =[[307,48,88,89],[307,48,89,89],[307,48,91,89],[305,49,93,89],[305,50,93,88],[305,50,93,88],[306,52,92,86],[305,53,93,84],[305,54,94,83],[306,54,93,83],[307,54,92,83],[307,54,92,83],[308,54,90,83],[308,54,90,83],[306,53,91,84],[306,53,91,84],[308,53,90,84],[308,53,90,84],[305,53,92,84],[305,52,92,85],…..
    这些是大图片中每个小图的坐标位置。循环获取。。。就实现了动画效果。

  7. 柳城 says:

    相关阅读：

    有个强人也写了个模拟的。有代码下载的

    模拟谷歌今日使用的css动画：http://www.cnblogs.com/hooray/archive/2011/05/11/2043122.html

    [呲牙]

  10. 艾晨 says:

    我把google的第二个画面之后的复制一下粘贴，就出现了很多数字，传说中的图的坐标

    我也超级喜欢了

引用通告 & 通告

  1. Simulation Google today use CSS animation说道：
    2011年07月24日 22:01

    […] Attach 1: then I found out Google is the original information such as the coordinate existing js array, and then add the circulation, div elements together in the value write, read the relatedLike today’s Google LOGO, Martha homegrown technique》 […]

  2. Concise version of modern dance pioneer, the googlelogo graffiti Martha homegrown technique说道：
    2011年06月10日 12:27

    […] to see garden front page:Simulation Google today use CSS animation (46/7689, 27)And inside theLike today’s Google LOGO, Martha homegrown technique"On Google to realize the special […]

  3. Jevona » 用css模拟谷歌今日使用的LOGO动画说道：
    2011年05月11日 21:40

    […] 附1：后来我发现google原来是把坐标等信息存在js数组里，然后循环添加div元素的时候，把值一并写进去，相关阅读《喜欢今天的Google LOGO 玛莎·葛兰姆》 […]

  4. 模拟谷歌今日使用的css动画 » NoName说道：
    2011年05月11日 15:06

    […] 　　附1：后来我发现google原来是把坐标等信息存在js数组里，然后循环添加div元素的时候，把值一并写进去，相关阅读《喜欢今天的Google LOGO 玛莎·葛兰姆》 […]

评论已关闭。