elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Curso de javascript por TickTack


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  javascript - Texto al lado del raton
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: javascript - Texto al lado del raton  (Leído 1,371 veces)
TickTack


Desconectado Desconectado

Mensajes: 434


CipherX


Ver Perfil
javascript - Texto al lado del raton
« en: 25 Octubre 2018, 18:41 pm »

Hola,

Aqui tienen un codigo que posiciona un texto al lado del raton y que con el movimiento del raton también lo arrastra:

Código:
<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de javascript</title>
  <meta charset="UTF-8">
</head>
<body>
<!-- Presentado por javascripts-gratis.de -->
<script type='text/javascript'>
<!--
message = 'www.javascripts-gratis.de '; // Tu texto
FonT = 'Verdana'; // Tu fuente
ColoR = '000080'; // Tu color de letra
SizE = 3; // Tu tamaño de letra (solamente 1 hasta 7)!

var amount = 5, ypos =- 50, xpos = 0, Ay = 0, Ax = 0, By = 0, Bx = 0, Cy = 0, Cx = 0, Dy = 0, Dx = 0, Ey = 0, Ex = 0;
if (document.layers) {
for (i = 0; i < amount; i++) {
document.write('<layer name=nsl'+i+' top=0 left=0><font face='+FonT+' size='+SizE+' color='+ColoR+'>'+message+'</font></layer>');
}
window.captureEvents(Event.MOUSEMOVE);
function nsmouse(evnt) {
xpos = evnt.pageX + 20;
ypos = evnt.pageY + 20;
}
window.onMouseMove = nsmouse;
}
else if (document.getElementById) {
document.write("<div id='outermausi' style='position:absolute;top:0px;left:0px'>");
document.write("<div style='position:relative'>");
for (i = 0; i < amount; i++) {
document.write('<div id="text'+i+'" style="position:absolute;top:0px;left:0px;width:400px;height:20px"><font face='+FonT+' size='+SizE+' color='+ColoR+'>'+message+'</font></div>')
}
document.write("</div>");
document.write("</div>");
function iemouse(e) {
ypos = (e)?e.pageY:event.y + 20;
xpos = (e)?e.pageX:event.x + 20;
}
window.document.onmousemove = iemouse;
}
function makefollow() {
if (document.layers) {
document.layers['nsl'+0].top = ay;
document.layers['nsl'+0].left = ax;
document.layers['nsl'+1].top = by;
document.layers['nsl'+1].left = bx;
document.layers['nsl'+2].top = cy;
document.layers['nsl'+2].left = cx;
document.layers['nsl'+3].top = Dy;
document.layers['nsl'+3].left = Dx;
document.layers['nsl'+4].top = Ey;
document.layers['nsl'+4].left = Ex;
}
else if (document.getElementById) {
document.getElementById('outermausi').style.top = document.documentElement.scrollTop;
document.getElementById('text0').style.top = ay+"px";
document.getElementById('text0').style.left = ax+"px";
document.getElementById('text1').style.top = by+"px";
document.getElementById('text1').style.left = bx+"px";
document.getElementById('text2').style.top = cy+"px";
document.getElementById('text2').style.left = cx+"px";
document.getElementById('text3').style.top = Dy+"px";
document.getElementById('text3').style.left = Dx+"px";
document.getElementById('text4').style.top = Ey+"px";
document.getElementById('text4').style.left = Ex+"px";

}
}
function move() {
ey = Ey += (ypos - Ey) * 0.2;
ex = Ex += (xpos - Ex) * 0.2;
dy = Dy += (ey - Dy) * 0.3;
dx = Dx += (ex - Dx) * 0.3;
cy = Cy += (dy - Cy) * 0.4;
cx = Cx += (dx - Cx) * 0.4;
by = By += (cy - By) * 0.5;
bx = Bx += (cx - Bx) * 0.5;
ay = Ay += (by - Ay) * 0.6;
ax = Ax += (bx - Ax) * 0.6;
makefollow();
setTimeout('move()', 10);
}
//-->
</script>
<script type="text/javascript">move();</script>
</body>
</html>

Página web: https://drive.google.com/open?id=18EP9NFKeq3L5TFtNUfCV-CcWh7MH2Q8o

Gracias y saludos


« Última modificación: 25 Octubre 2018, 18:44 pm por TickTack » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Eclipse loco cambia texto con solo pinchar el ratón
Java
fran800m 2 2,413 Último mensaje 16 Marzo 2012, 23:58 pm
por fran800m
[Resuelto] Enviar texto a una url con javascript « 1 2 »
Desarrollo Web
Kaxperday 13 9,181 Último mensaje 20 Octubre 2015, 13:49 pm
por Kaxperday
¿Lado Oscuro o Lado Luminoso? Google permite personalizar todos sus servicios...
Noticias
wolfbcn 0 1,906 Último mensaje 23 Noviembre 2015, 15:15 pm
por wolfbcn
javascript lightbox+texto o html
Desarrollo Web
xavidenia 2 1,971 Último mensaje 19 Septiembre 2016, 10:50 am
por xavidenia
javascript del lado del servidor - NodeJs
Desarrollo Web
0xFer 2 2,618 Último mensaje 17 Junio 2017, 22:28 pm
por 0xFer
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines