Moviendo cosas por la pagina ^_^

neowebmaster · #1 (**permalink**) 09/08/2004, 10:19

Weno, me gustaria saber como hacer pa mover cosas por la page en JS, he estao investigando un codigo que hace que una frase siga al raton, con lo que se va moviendo por la pagina y mas o menos lo pillo pero... tengo alguna duda

Lo primero, la diferencia entre document.all y document.layers, si esq alguien la sabe bien, he encontrao cosas por google pero no me lo han terminado de aclarar del todo... ù.ú

Lo segundo, en caso que por ejemplo sea con layers, las cosas las coloca en su sitio y coordenadas asi:

for (i = 0; i < message.length - 1; i++)
{
var thisspan = eval("document.span" + i)
thisspan.left = xpos[i]
thisspan.top = ypos[i]
}

segun eso, que mas o menos lo entiendo, crea la variable "thisspan", ejecuta el document.spanX y se lo asigna de valor... pero, q es eso de document.span??? a que se refiere?? es necesario que os pase el codigo entero??? xDDDDDDDDD

Por si acaso, esto es lo que hay en el body, que hay algo de spans tb:

<body onLoad="makesnake()">

<script language="JavaScript">

</script>

</body>

caricatos · #2 (**permalink**) 10/08/2004, 03:03

Hola neowebmaster:

Para empezar, con respecto a document.all y document.layers, creo que es conveniente olvidarse porque no son cosas estándar...

document.all es cosa de microsoft (y opera lo implementa), y document.layers es de netscape, pero versiones viejas...

Si recortas el código puedes pasarnos lo que te quede que será más fácil de ver.

Saludos

neowebmaster · #3 (**permalink**) 10/08/2004, 16:24

Bueno, en realidad ese codigo es lo de menos, lo que yo quiero es saber como hacer que cosas como una imagen o una letra se muevan por la pantalla, que sigan al raton no me importa.
La cosa tiene uas coordenadas, y luego le da las coordenadas a la letra o imagen en cuestion para colocarlas en su sitio, pero, no entiendo bien el como lo hace o como funciona, que es lo que yo quiero saber, como se hace eso para luego yo hacer otras cosas interesantes ^^

Tu sabes como funciona eso??? ;)

neowebmaster · #4 (**permalink**) 10/08/2004, 21:57

Weno, he pillao un manual de CSS y ara lo entiendo, ya se como se hace ^_^

Thanks ^^

caricatos · #5 (**permalink**) 11/08/2004, 01:25

Hola otra vez:

La forma que yo uso es sencillamente poner los objetos (imágenes, capas...) con un estilo básico: (style="position: absolute; left: 0px; top: 0px;" )... los valores left y top son los que sirven para mover las capas (cambiar las coordenadas), luego para hacer un efecto de movimiento, cambio las coordenadas con pequeñas pausas (setTimeout)

Si necesitas un ejemplo avisa.

Saludos

neowebmaster · #6 (**permalink**) 11/08/2004, 11:10

Bueno, no acaba de salirme bien :(
He intentado cambiar ls corrdenadas pero no consigo hacer referencia al objeto, me dice que no es un objeto o es nulo y he intentao referirme a el de varis maneras pero no me sale :(

Este es el codigo: (Se trata de mover la frase poco a poco hacia la derecha)

<html><head>
<script type="text/javascript">

function mover()
{
document.capa1.left+=5; //Aqui da el fallo :(
setTimeout("mover()",20);
}
</script>
</head>
<BODY onLoad="mover()">

<div id="capa1" style="position: absolute; left: 200px; top: 100px;">Hola que tal</div>

</BODY></html>

caricatos · #7 (**permalink**) 11/08/2004, 12:06

Hola otra vez:

Cambia la línea que te da el fallo por esta:

document.getElementById("capa1").style.left = parseInt(document.getElementById("capa1").style.le ft) + 5 + "px";

Saludos

neowebmaster · #8 (**permalink**) 11/08/2004, 12:22

^_^

Siiiiii

Gracias, alfin funciona, ara ya puedo hacer tonterias por ahi divertidas

Taotraaaaaaaaa

neowebmaster · #9 (**permalink**) 11/08/2004, 14:29

Bueno... ^^U Ya que tenia entre manos el codigo de un texto que sigue al raton, intente hacer algo mas sencillo que ese codigo, pero que tb fuera siguiendo al raton, por curiosidad y tal, pero me he hecho un lio @_@ y me salen errores por tos laos o bueno, solo sale un error pero no se ni porque y si cvambio cosas salen mas errores.

Este es el codigo, a ver si puedes decirme ande falla ^^UUUUUUU

<html>
<head>
<script type="text/javascript">

function sigueme()
{
var x = (document.layers) ? e.pageX : document.body.scrollLeft
var y = (document.layers) ? e.pageY : document.body.scrollTop
document.getElementById("siguelo").style.left = x + "px";
document.getElementById("siguelo").style.top = y + "px";
setTimeout("sigueme()",20);
}
</script>
</head>

<BODY>
<script type="text/javascript">

if (document.layers) {document.captureEvents(Event.MOUSEMOVE)}

document.onMouseMove=sigueme();
</script>

<div id="siguelo">A</div>

</BODY>
</html>

trhipahx · #10 (**permalink**) 03/10/2006, 01:37

Este ejemplo trata bastante bien mi problema.

Lo que ocurre es que con el setTimeout el objeto no deja de moverse.
Yo lo qu equiero es que se pmueva un trozo y depués pare.

He probado con :
var id = setInterval("objectsFloat()",delay);

setTimeout("clearInterval("+id+")",5000);

Pero se me queda colgado el navegador.
¿alguien me puede ayudar?