Con este
código podrás mostrar en tu
sitio, blog o espacio Web
una frase o texto que sigue
al cursor, funciona tanto
para Firefox como IExplorer.
Ejemplo:
Código:
|
<script language="JavaScript"
type="text/javascript">
mensaje = 'Coloca
aquí la frase
que sigue al
cursor';
font = 'Verdana,Arial';
size = 2;
color = 'black';
velocidad = 0.7;
n4 = (document.layers);
ie = (document.all);
n6 = (document.getElementById);
mensaje =
mensaje.split('');
n =
mensaje.length;
a = size*10;
ymouse = 0;
xmouse = 0;
props = "<font
face="+font+"
color="+color+"
size="+size+">";
if (n4)
{
for ( i = 0; i <
n; i++)
document.write('<layer
left="0" top="0"
width="+a+" name="n4mensaje'+i+'"
height="+a+"><center>'+props+mensaje[i]+'</font></center></layer>');
}
else if (ie)
{
document.write('<div
id="padre" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < n;
i++)
document.write('<div
id="iemensaje"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div
id="padre" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i = 0; i <
n; i++)
document.write('<div
id="iemensaje'+i+'"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
if(n4)
window.captureEvents(Event.MOUSEMOVE);
function
Mouse(evento)
{
if(ie)
{
xmouse = event.x+20;
ymouse = event.y+20;
}
else if(n4 ||
n6)
{
xmouse =
evento.pageX+20;
ymouse =
evento.pageY+20;
}
}
if(n4)
window.onMouseMove
= Mouse
else if(ie ||
n6)
document.onmousemove
= Mouse;
y = new Array();
x = new Array();
Y = new Array();
X = new Array();
Yaux = new
Array();
Xaux = new
Array();
for (i=0; i < n;
i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
Yaux[i] = 0;
Xaux[i] = 0;
}
function
asigna()
{
if (ie)
padre.style.top
=
document.body.scrollTop;
for (i = 0; i <
n; i++)
{
if(n4)
{
document.layers['n4mensaje'+i].top
= y[i];
document.layers['n4mensaje'+i].left
= x[i]+(i*(a/2));
}
else if(ie)
{
iemensaje[i].style.top
= y[i];
iemensaje[i].style.left
= x[i]+(i*(a/2));
}
else if(n6)
{
eval("document.getElementById('iemensaje"+i+"').style.top
= '"+y[i]+"px'");
eval("document.getElementById('iemensaje"+i+"').style.left
= '"+(x[i]+(i*(a/2)))+"px'");
}
}
}
function
ondula()
{
y[0]=Math.round(Y[0]
+=((ymouse)-Y[0])*velocidad);
x[0]=Math.round(X[0]
+=((xmouse)-X[0])*velocidad);
for (var i = 1;
i < n; i++)
{
Yaux[i] =
Math.round(Y[i]);
Xaux[i ]=
Math.round(X[i]);
y[i] =
Math.round(Y[i]=Yaux[i]+(y[i-1]-Y[i])*velocidad);
x[i] =
Math.round(X[i]=Xaux[i]+(x[i-1]-X[i])*velocidad);
}
asigna();
setTimeout('ondula()',50);
}
window.onload =
ondula;
</script> |
En las
partes del código que
mostramos en rojo
corresponden a los
valores que puedes
cambiar de acuerdo al
texto que deseas que
siga al cursor:
|
mensaje = 'Coloca
aquí la
frase que
sigue al
cursor'; |
Corresponde
a la frase
y/o texto
que seguirá
al cursor. |
|
font = 'Verdana,Arial'; |
Corresponde
al tipo de
fuente del
texto. |
|
size =
2; |
Corresponde
al tamaño de
la fuente
del texto. |
|
color = 'black'; |
Corresponde
al color (en
ingles) de
la fuente
del texto.
En fondos
oscuros,
quedará bien
"white"
(blanco). |
|
velocidad =
0.7; |
Corresponde
a la
velocidad de
desplazamiento
del texto. |