MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Reloj que se desplaza con el cursor


Resultado de imagen para reloj de colores que sigue al cursorMe gustó mucho éste cursor porque es original, útil, pero también tiene la opción de ser deshabilitado por el visitante si le es molesto.

Resultado de imagen para botones de demo


Plantilla - Editar HTML.

CTRL+F   buscaremos </head>  y encima pegamos el sig. código:

<style type="text/css">.css1{position:absolute;top:0px;left:0px;width:16px;height:16px;font-family:Arial,sans-serif;font-size:16px;text-align:center;font-weight:bold;}.css2{position:absolute;top:0px;left:0px;width:10px;height:10px;font-family:Arial,sans-serif;font-size:10px;text-align:center;}#control{ /* estilos del botón */background: #e2e2e2; /* color de fondo */color: #000; /* color del texto */border: 1px #66CCCC solid; /* ancho y color de borde */border-radius: 10px; /* redondeo de esquinas */}</style>

En el sig. código, código podemos modificar los colores del reloj, la fecha y las manecillas. Vienen muy bien descritas para que lo puedas hacer fácilmente

Debajo de  </head>  pegas el si. código:


<script type='text/javascript'>//Efecto reloj en el cursor//diversas y variadas// <![CDATA[if (document.getElementById&&!document.layers){
dCol='#339999'; //color fecha.fCol='#000000'; //color números.sCol='#000000'; //color manecilla segundos.mCol='#339999'; //color manecilla minutos.hCol='#339999'; //color manecilla horas.del=0.6; //Velocidad a la que sigue el reloj al cursor.ref=40;
var ieType=(typeof window.innerWidth != 'number');var docComp=(document.compatMode);var docMod=(docComp && docComp.indexOf("CSS") != -1);var ieRef=(ieType && docMod)?document.documentElement:document.body;theDays=new Array("DOMINGO","LUNES","MARTES","MIERCOLES","JUEVES","VIERNES","SABADO");theMonths=new Array("ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE");date=new Date();day=date.getDate();year=date.getYear();if (year < 2000) year=year+1900; tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;D=tmpdate.split("");N='3 4 5 6 7 8 9 10 11 12 1 2';N=N.split(" ");F=N.length;H='...';H=H.split("");M='....';M=M.split("");S='.....';S=S.split("");siz=40;eqf=360/F;eqd=360/D.length;han=siz/5.5;ofy=-7;ofx=-3;ofst=70;tmr=null;vis=true;mouseY=0;mouseX=0;dy=new Array();dx=new Array();zy=new Array();zx=new Array();tmps=new Array();tmpm=new Array(); tmph=new Array();tmpf=new Array(); tmpd=new Array();var sum=parseInt(D.length+F+H.length+M.length+S.length)+1;for (i=0; i < sum; i++){dy[i]=0;dx[i]=0;zy[i]=0;zx[i]=0;}
algn=new Array();for (i=0; i < D.length; i++){algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'<\/div>');tmpd[i]=document.getElementById("_date"+i).style;}for (i=0; i < F; i++){document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'<\/div>');tmpf[i]=document.getElementById("_face"+i).style; }for (i=0; i < H.length; i++){document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'<\/div>');tmph[i]=document.getElementById("_hours"+i).style;}for (i=0; i < M.length; i++){document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'<\/div>');tmpm[i]=document.getElementById("_minutes"+i).style; }for (i=0; i < S.length; i++){document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'<\/div>');tmps[i]=document.getElementById("_seconds"+i).style; }
function onoff(){if (vis){ vis=false;document.getElementById("control").value="Prender reloj";}else{ vis=true;document.getElementById("control").value="Apagar reloj";Delay();}kill();}
function kill(){if (vis) document.onmousemove=mouse;else document.onmousemove=null;}
function mouse(e){var msy = (!ieType)?window.pageYOffset:0;if (!e) e = window.event; if (typeof e.pageY == 'number'){mouseY = e.pageY + ofst - msy;mouseX = e.pageX + ofst;}else{mouseY = e.clientY + ofst - msy;mouseX = e.clientX + ofst;}if (!vis) kill();}document.onmousemove=mouse;
function winDims(){winH=(ieType)?ieRef.clientHeight:window.innerHeight; winW=(ieType)?ieRef.clientWidth:window.innerWidth;}winDims();window.onresize=new Function("winDims()");
function ClockAndAssign(){time = new Date();secs = time.getSeconds();sec = Math.PI * (secs-15) / 30;mins = time.getMinutes();min = Math.PI * (mins-15) / 30;hrs = time.getHours();hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
for (i=0; i < S.length; i++){tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";}for (i=0; i < M.length; i++){tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";}for (i=0; i < H.length; i++){tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";}for (i=0; i < F; i++){tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";}for (i=0; i < D.length; i++){tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";}if (!vis)clearTimeout(tmr);}
buffW=(ieType)?80:90;function Delay(){scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;if (!vis){dy[0]=-100;dx[0]=-100;}else{zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);}for (i=1; i < sum; i++){if (!vis){dy[i]=-100;dx[i]=-100;}else{zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);}if (dy[i-1] >= winH-80) dy[i-1]=winH-80;if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;}
tmr=setTimeout('Delay()',ref);ClockAndAssign();}window.onload=Delay;}// ]]></script>

Guardar plantilla

PASO OPCIONAL: BOTÓN ON/OFF
Se puede habilitar un botón para que los visitantes lo quiten si lo desean

Diseño
Añadir un gadget
HTML/Javascript

Insertar el sig. código:
<script type="text/javascript">if (document.getElementById&&!document.layers){document.write('<input type="button" id="control" value="Apagar reloj" onClick="this.blur();onoff()">');}</script>

Guardar 

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
loading...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者