Objetos Flotantes

trhipahx · #1 (**permalink**) 28/09/2006, 01:25

Hola a tod@s!!!!

Me gustaría hacer que unas letras bailen por la pantalla del navegador.
He utilizado el código que viene a continuación y todo funciona bien en IE pero no funciona ni con NetScape ni con FireFox 1.5

¿alguien me puede ayudar a modificar el código para que funcione en todos los navegadores?

Gracias
Esto va en el Head:
<script language="javascript">
var tall=200;
var wide=200;
var step=.25;
var delay=50;
var nextStep=0;
var numObjects=6;
var Xpos=200;
var Ypos=200;
function objectsFloat() {
for (var xx=1; xx<(numObjects+1); xx++) {
var objectID='letters'+xx;
var object=document.getElementById(objectID);
object.style.top=Ypos+Math.cos((20*Math.sin(nextSt ep/(30+xx)))+xx*70)*tall*(Math.sin(10+nextStep/10)+0.2)*Math.cos((nextStep+xx*55)/10);
object.style.left=Xpos+Math.sin((20*Math.sin(nextS tep/(30)))+xx*70)*wide*(Math.sin(10+nextStep/(10+xx))+0.2)*Math.cos((nextStep+xx*55)/10);
}
nextStep+=step;
setTimeout('objectsFloat()',delay);
}

</script>

Esto va en el cuerpo:

<body onLoad="objectsFloat()">
<div id="letters1" style="position:absolute; left:300; top:140; visibility:visible; font:136px times; colr#000000;">a</div>
<div id="letters2" style="position:absolute; left:690; top:240; visibility:visible; font:136px times; colr#333333;">L</div>
<div id="letters3" style="position:absolute; left:400; top:340; visibility:visible; font:136px times; colr#666666;">i</div>
<div id="letters4" style="position:absolute; left:400; top:340; visibility:visible; font:136px times; colr#999999;">C</div>
<div id="letters5" style="position:absolute; left:400; top:340; visibility:visible; font:136px times; colr#CCCCCC;">e</div>
<div id="letters6" style="position:absolute; left:400; top:340; visibility:visible; font:136px times; colr#FFFFFF;">!</div>
</body>

caricatos · #2 (**permalink**) 28/09/2006, 03:39

Hola:

A simple vista, te falta poner las medidas a los estilos...

object.style.top=Ypos+Math.cos((20*Math.sin(nextSt ep/(30+xx)))+xx*70)*tall*(Math.sin(10+nextStep/10)+0.2)*Math.cos((nextStep+xx*55)/10) + "px";
object.style.left=Xpos+Math.sin((20*Math.sin(nextS tep/(30)))+xx*70)*wide*(Math.sin(10+nextStep/(10+xx))+0.2)*Math.cos((nextStep+xx*55)/10) + "px";

Saludos

trhipahx · #3 (**permalink**) 29/09/2006, 00:15

Muchas gracias!!!

Menudo cosa más sencilla y tan complicada a la vez.

Me gusta mucho este foro, ayuda un montón.

Agur

trhipahx · #4 (**permalink**) 02/10/2006, 08:29

Soy yo de nuevo.
Con el código que mostré en el mensaje los objetos estan continuamente en movimiento.
¿cómo puedo hacer para que el objeto recorra una trayectoria determinada y se detenga?

Gracias

trhipahx · #5 (**permalink**) 03/10/2006, 00:25

Con el setTimeout la función se llama a sí misma continuamente.
¿cómo puedo hacer para salir de ese bucle?
Yo quiero quela función se detentga trascurrido un tiempo o al de x veces de repetirse.

Gracias

trhipahx · #6 (**permalink**) 04/10/2006, 00:29

Siento ser tan pesado pero es muy importante para mí.
Por favor que alguien se detenga en este mesnaje y le de una resouesta.
Mi objetivo que que una imagen dentro de un DIV recorra la pantalla de izquierda a derecha y al desaparecer por la derecha se detenga y no vuelva a salir a menos que yo lo desee.

Muchas gracias.

caricatos · #7 (**permalink**) 04/10/2006, 01:02

Hola:

Es que mirar el código de terceros no es lo que gusta a un programador... pero supongo que la clave está en las 2 últimas líneas de la función

nextStep+=step;
setTimeout('objectsFloat()',delay);

Si nextStep llega al final de la pantalla se debe detener...

if (nextStep < document.body.offsetWidth) {
nextStep+=step;
setTimeout('objectsFloat()',delay);
}

Pero verás, hay unas operaciones que no sé los resultados que devuelven... así que en las pruebas tendrías que poner algún chivato para saber si es correcto, como una alerta...

else alert("fin...");

Pruébalo y nos cuentas... y para reanudar, desde algún evento tendrías que reinicializar la variable nextStep a cero...

Saludos

trhipahx · #8 (**permalink**) 04/10/2006, 01:28

Muchas gracias por la ayuda.
LA solución buena es poner una condición como tú me comentas y en el else poner sencillamente return. Eso es lo que me faltaba a mí, saber cómo salir de la función al llegar a un punto.
Ya ves, por un return.

Gracias.

caricatos · #9 (**permalink**) 04/10/2006, 01:34

Cita:

Iniciado por trhipahx

Muchas gracias por la ayuda.
LA solución buena es poner una condición como tú me comentas y en el else poner sencillamente return. Eso es lo que me faltaba a mí, saber cómo salir de la función al llegar a un punto.
Ya ves, por un return.

Gracias.

Hola:

Parece que ya has solucionado el problema y me alegro...

Lo del else era cuestión de ponerlo en la fase de pruebas, para saber si el sistema era correcto y parece que sí. En tal caso no es necesario ponerlo.

Y no es la cuestión de la solución "el return" sino saber la condición de salida del bucle para dejar de realizar la instrucción "setTimeout".

Saludos