Mover Capa

gerardmb · #1 (**permalink**) 29/12/2008, 07:10

Hola amigos, a ver si me pueden ayudar un poquillo.

Tengo una funcion con la que pretendo mover una capa(bola) dentro de unos limites.
No se donde me falla el codigo o en que estoy fallando que no se mueve mi capa

a ver si me pueden ayudar un poco! Merci!!!

Código:

function muevebola(bola) {


if( parseInt(bola.style.left) < 130){
avanceh = 2;
bola.style.left = parseInt(bola.style.left) + avanceh;

}

if(parseInt(bola.style.left) < 930){
avanceh = -2;
bola.style.left = parseInt(bola.style.left) + avanceh;

}

if( parseInt(bola.style.top) < 190){
avancev = 2;
bola.style.top = parseInt(bola.style.top) + avancev;

}

if(parseInt(bola.style.top)< 650){
avancev = -2;
bola.style.top = parseInt(bola.style.top) + avancev;

}
setTimeout("muevebola()", 10);
}

felix126 · #2 (**permalink**) 29/12/2008, 07:28

En esta funcion:

Código javascript:

Ver originalsetTimeout("muevebola()", 10);

no le pasas el parametro bola que necesita tu funcion.

Código javascript:

Ver originalfunction muevebola(bola)

Saludos

gerardmb · #3 (**permalink**) 29/12/2008, 09:42

Hola,
Gracias por mirarte el mensaje que habia puesto.

Sigo sin hacerlo funcionar...Entre que soy novato y lo lo atascado que ando con el tema, no avanzo.

Trate de solucionarlo como me decias, pero no logro acabarlo.

felix126 · #4 (**permalink**) 29/12/2008, 10:15

Pero especifica más, en base a que eventos queres moverlo?
Cuando se carga toda la pagina? Con eventos del teclado?
El setTimeout lo que va a hacer es moverlo despues que hayan transcurrido 10 milisegundos y solo una vez, si quieres que se mueva cada rato con ese intervalo deberias usa setInterval.

Panino5001 · #5 (**permalink**) 29/12/2008, 10:16

Un par de cosas:
1) El objeto debe tener posicionamiento absoluto.
2)Falta la unidad px.
3)Los condicionales se contradicen.
Probá así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Documento sin t&iacute;tulo</title>

<script>

var avanceh=2,avancev=2;

function muevebola(bola) {

if( parseInt(bola.style.left) > 930 || parseInt(bola.style.left) <130){

    avanceh=-avanceh

}

if( parseInt(bola.style.top) > 650 || parseInt(bola.style.top) <190){

avancev = -avancev;

}

 
bola.style.left = parseInt(bola.style.left) + avanceh+'px';

bola.style.top = parseInt(bola.style.top) + avancev+'px';

setTimeout(function(){muevebola(bola);}, 10);

}

onload=function(){muevebola(document.getElementById('bola'))}

</script>

</head>

 
<body>

<div id="bola" style="width:20px; height:20px; background-color:#F00; position:absolute; top:190px; left:130px"></div>

</body>

</html>

gerardmb · #6 (**permalink**) 29/12/2008, 10:40

Muchisimas gracias Panino5001!!!!

Y a parte, muchas gracias por comentarme donde fallaba....y como mirar de solucionarlo

Se agradece la ayuda...Un Saludo!

Panino5001 · #7 (**permalink**) 29/12/2008, 10:41

Me alegra que te sirva