Doodle Google Navidad Jquery
Posteado el 23. Dec, 2010 por tuto in Jquery
El Doodle de Navidad fue un efecto de fotos realizado en Jquery aqui les dejamos como lo hicieron. Esperamos les guste
En este link puedes ver lo que haremos
PASO1
Creamos una carpeta llamada Google dentro de la cual vamos a crear una carpeta llamada logos, donde vamos a colocar las imágenes que vamos a utilizar.
PASO 2
Ahora vamos a Adobe Dreamweaver y creamos un nuevo documento HTML en blanco.
PASO 3
Debajo de la etiqueta Google Navidad vamos a copiar el siguiente código html4strict.
<script>
window.google={kEI:"n6UTTaS7HYKMywX0gvjvDA",kEXPI:"17259,24283",kCSI:{e:"17259,24283",ei:"n6UTTaS7HYKMywX0gvjvDA",expi:"17259,24283"},ml:function(){},pageState:"#",kHL:"es",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,j:{en:1,l:function(){google.fl=true},e:function(){google.fl=true},b:location.hash&&location.hash!="#",bv:5,pl:[],mc:0,sc:0.5},Toolbelt:{}};(function(){var c=google.j;window.onpopstate=function(){c.psc=1};for(var d=0,b;b=["ad","bc","p","pa","ac","pc","pah","ph","sa","spf","xx","zc","zz"][d++];)(function(a){c[a]=function(){c.pl.push([a,arguments])}})(b)})();if(!window.chrome)window.chrome=
{};window.chrome.sv=1.00;
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.gtbExternal&&window.gtbExternal.pageT();
}catch(v){}
window.google.jsrt_kill=1;
</script>
PASO 4
Dentro de las etiquetas vamos a copiar el siguiente código html4strict.
PASO 5
Por ultimo debajo de la etiqueta vamos a copiar el siguiente código html4strict.
<script>(function(){var d=window,h=google,i=document;function j(a,b){return a.position=b}var k="appendChild",l="createElement",n="scale";try{if(!h.doodle)h.doodle={};var q=i.getElementById("hplogo"),r=true,s={"1": "Desierto+del+Sahara", "2": "Siria", "3": "Danzas+hind%C3%BAes", "4": "Nepal", "5": "Gran+muralla+china", "6": "Monte+Fuji", "7": "Puerto+de+S%C3%ADdney", "8": "Tejados", "9": "Grecia", "10": "G%C3%B3ndolas+venecianas", "11": "Tronco+de+navidad", "12": "Catedral+de+San+Basilio", "13": "pierogi", "14": "Chiles", "15": "Vi%C3%B1edos+chilenos", "16": "L%C3%A1mpara+de+henna", "17": "Kanga+africano"},t=[["#994d33",6],["#994d33",4],["#733a26",4]],u=-999,v=-999,w=function(a,b,c,e,g,m,o,p,f,A,B,x){this.x=this.d=a;this.y=this.e=b;this.z=g;this.A=m;this.g=this.i=c;this.c=this.h=e;this.s=g-a;this.u=m-b;this.v=t[x][0];this.a=t[x][1];this.r=o+2*this.a-c;this.p=p+2*this.a-e;this.scale=this.n=0;this.B=B;c=i[l]("div");a=this.w=c.style;a.backgroundColor=this.v;c.id="hplogo-"+f;(b=i.getElementById(c.id))&&b.parentNode&&b.parentNode.removeChild(b);q[k](c);e=i[l]("div");b=this.m=e.style;b.overflow="hidden";b.top=this.a+"px";b.left=this.a+"px";c[k](e);c=i[l]("a");f="/search?q="+s[f]+"&ct=holiday10-hp&oi=ddle";if((g=i.forms.f||i.forms.gs||i.forms.tsf)&&g.hl)f+="&hl="+g.hl.value;c.href=f;e[k](c);f=i[l]("img");e=this.o=f.style;f.src="logos/holiday10-hp-"+A+".jpg";f.border=0;c[k](f);j(a,j(b,j(e,"absolute")));this.position(17,true)};j(w.prototype,function(a,b){var c=this.w,e=this.n-this[n];if(b||Math.abs(e)>0.01){var g=0.55;if(e< 0)g/=2;this.scale+=g*e;g=Math.ceil(this.d+this[n]*this.s);var m=Math.ceil(this.e+this[n]*this.u),o=Math.floor(this.i+this[n]*this.r),p=Math.floor(this.h+this[n]*this.p),f=g+o< this.x+this.g;if(e>0&&f||e< 0&&!f)o=this.x+this.g-g;f=m+p< this.y+this.c;if(e>0&&f||e< 0&&!f)p=this.y+this.c-m;this.x=g;this.y=m;this.g=o;this.c=p;c.width=this.g+"px";c.height=this.c+"px";c.left=this.x+"px";c.top=this.y+"px";this.m.height=this.c-this.a*2+"px";this.m.width=this.g-this.a*2+"px";this.o.left=this.z-this.x+"px";this.o.top=this.A-this.y-this.B+"px"}c.zIndex=17-a});w.prototype.update=function(){this.n=u>this.d&&v>this.e&&u< this.d+this.i&&v< this.e+this.h?1:u>this.d-20&&v>this.e-20&&u< this.d+20+this.i&&v< this.e+20+this.h?1/6:0};var y=[new w(255,28,61,50,217,28,158,123,1,6,0,2),new w(277,82,73,49,191,45,209,131,2,6,271,0),new w(207,97,58,66,167,81,211,100,3,4,238,1),new w(337,137,74,50,337,63,214,116,4,2,163,1),new w(162,40,81,50,160,13,91,120,5,4,118,1),new w(165,6,67,29,36,6,188,118,6,4,0,2),new w(322,15,35,50,255,4,130,148,7,6,123,0),new w(506,39,97,72,296,16,314,135,8,5,0,0),new w(73,22,73,56,54,22,172,109,9,1,0,0),new w(367,41,59,90,292,-3,126,163,10,2,0,2),new w(78,85,54,94,-35,1,175,179,11,1,220,2),new w(-7,37,72,111,-29,30,190,110,12,1,109,0),new w(152,95,44,55,100,11,143,165,13,4,338,0),new w(283,136,33,34,229,93,115,78,14,6,402,2),new w(439,13,51,125,400,2,133,128,15,3,0,1),new w(501,117,64,50,402,46,204,131,16,5,135,2),new w(429,141,49,43,429,45,148,131,17,3,128,0)],z=function(a){a=a||d.event;u=a.clientX-q.offsetLeft+(i.body.scrollLeft||i.documentElement.scrollLeft);v=a.clientY-q.offsetTop+(i.body.scrollTop||i.documentElement.scrollTop)};h.doodle.hover=function(a){if(r){r=false;d.setTimeout(function(){r=true},50);z(a)}};h.doodle.hide=function(a){z(a);if(u<= 0||u>=q.offsetWidth||v<= 0||v>=q.offsetHeight-10)u=v=-999};if(h.doodle.k){d.clearInterval(h.doodle.k);h.doodle.k=null}h.doodle.k=d.setInterval(function(){for(var a=0,b;b=y[a++];)b.update();y.sort(function(c,e){var g=e[n]-c[n];return g< 0?-1:g==0?0:1});for(a=0;b=y[a];)b.position(a++)},50)}catch(C){h.ml(C,false,{cause:"DOODLE"})};})();</script>
PASO 6
Ahora presionamos el comando Ctrl + S y guardamos nuestro html dentro de la carpeta Google con el nombre Google_navidad.html.
PASO 7
Listo ya tenemos nuestro efecto terminado.
Descarga el editable de Doodle Google Navidad