Doodle Google Navidad Jquery

Posteado el 23. Dec, 2010 por 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.

Doodle Google Navidad

PASO 2

Ahora vamos a Adobe Dreamweaver y creamos un nuevo documento HTML en blanco.

Doodle Google Navidad

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>

Doodle Google Navidad

PASO 4

Dentro de las etiquetas vamos a copiar el siguiente código html4strict.

<div id=lga style="width: 585px; height:190px;padding-top:50px; margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;  ">
 
<div id=hplogo onMouseMove="google.doodle.hover(event)" onMouseOut="google.doodle.hide(event)" style="height:190px;position:relative;width:585px"></div>
 
</div>

Doodle Google Navidad

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>

Doodle Google Navidad

PASO 6

Ahora presionamos el comando Ctrl + S y guardamos nuestro html dentro de la carpeta Google con el nombre Google_navidad.html.

Doodle Google Navidad

PASO 7

Listo ya tenemos nuestro efecto terminado.

Doodle Google Navidad

Descarga el editable de Doodle Google Navidad


Tags: , ,

Deja tu Comentario

Tutoriales en la web se reserva el derecho de moderación de los comentarios. Evita por favor utilizar palabras soeces, ataques directos e insultos, de lo contrario tu comentario será eliminado.

Hire PHP Developer India
Get Adobe Flash player