Javascript - Texto girando alrededor del puntero
Códigos Javascript
Bonito efecto que muestra un texto girando alrededor del raton y sigue su estela.
Tutores.org
Mostrando Codigo - Javascript
EXPLICACION
Linea 1:
Modificar el mensaje
Linea 2:
Modifivar el tipo de fuente o letra
Linea 3:
Tamaño de letra
Linea 4:
Velocidad de rotacion
Posteriormente no es necesario ninguna modificacion mas exepto la que indicamos como bgcolor="#cccccc, al pie de la pagina, que deberas modificarla con el color que quieres para el fondo de tu/s paginas
CODIGO
# Codigo ofrecido por Tutores.org
- <script LANGUAGE="JavaScript">
- var msg='Bienvenido visitante'; // mensaje maximo 14 caracteres
- var font='verdana';
- var size=2;
- var color='red';
- var speed=.2;
- var rotation=.2;
- var ns=(document.layers);
- var ie=(document.all);
- var msg=msg.split('');
- var n=msg.length;
- var a=size*15;
- var currStep=0;
- var ymouse=0;
- var xmouse=0;
- var scrll=0;
- var props="<font face="+font+" size="+size+" color="+color+">";
- if (ie)
- window.pageYOffset=0
- if (ns){
- for (i=0; i < n; i++)
- document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
- }
- if (ie){
- document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
- for (i=0; i < n; i++)
- document.write('<div id="iemsg" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center;font-weight:regular;cursor:default">'+props+msg[i]+'</font></div>');
- document.write('</div></div>');
- }
- (ns)?window.captureEvents(Event.MOUSEMOVE):0;
- function Mouse(evnt){
- ymouse = (ns)?evnt.pageY+20-(window.pageYOffset):event.y;
- xmouse = (ns)?evnt.pageX+20:event.x-20;
- }
- if (ns||ie)
- (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
- y=new Array();
- x=new Array();
- Y=new Array();
- X=new Array();
- for (i=0; i < n; i++){
- y[i]=0;
- x[i]=0;
- Y[i]=0;
- X[i]=0;
- }
- function makecircle(){
- if (ie) outer.style.top=document.body.scrollTop;
- currStep-=rotation;
- for (i=0; i < n; i++){
- var d=(ns)?document.layers['nsmsg'+i]:iemsg[i].style;
- d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15;
- d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2;
- }
- }
- function drag(){
- scrll=(ns)?window.pageYOffset:0;
- y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
- x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
- for (var i=1; i < n; i++){
- y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
- x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
- }
- makecircle();
- setTimeout('drag()',10);
- }
- if (ns||ie)window.onload=drag;
- -->
- </script>
- <body bgcolor="#cccccc"></body>
ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Texto girando alrededor del puntero" href="http://www.tutores.org/codigo/892/" target="_blank">Texto girando alrededor del puntero</a>
<!-- Final enlace Tutores.org -->
<a title="Tutores.org - Texto girando alrededor del puntero" href="http://www.tutores.org/codigo/892/" target="_blank">Texto girando alrededor del puntero</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
Sin definirSin definir
5
5
Hola, me llamo Joan y soy el cantante de un nuevo grupo de Barclona, ARANGU. Tenemos un myspace (http://www.myspace.com/arangu)
y queremos resaltar el texto "DESCARREGAR/DOWNLOAD", "MUSICA" ,"ARANGU". He intentado poner los codigos de vustra pag. web, pero es imposible para mi..no entiendo nada!!jeje
Me gustaría poner un titulo similar al exemplo de vuestra web ("entrar a www.lopezworld.com juegos")pero con (Descarregar/download musica arangu)... me gusta mucho el formato y los colores tambien.
Que codigo deberia poner? Muchas gracias y disculpen las molestias.
Joan
y queremos resaltar el texto "DESCARREGAR/DOWNLOAD", "MUSICA" ,"ARANGU". He intentado poner los codigos de vustra pag. web, pero es imposible para mi..no entiendo nada!!jeje
Me gustaría poner un titulo similar al exemplo de vuestra web ("entrar a www.lopezworld.com juegos")pero con (Descarregar/download musica arangu)... me gusta mucho el formato y los colores tambien.
Que codigo deberia poner? Muchas gracias y disculpen las molestias.
Joan
Comentario usuario
vicente
04-12-2007 06:05:06
5
5
Como lo puedo hacer en netscape o mozila
??????????????????????????
??????????????????????????
INSERTAR COMENTARIO