muovere oggetto

**clhona** · 06-10-2010, 12:19

Sto tendando di far muovere un immagine:

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


</script>
</head>

<body >

<img id=myImage src=images/p.png onclick=muovi()>

</TD></TR></table>
</body>
</html>

pensavo che richiamando la funzione al suo interno ogni 100 ms l'immagine si sarebbe mossa di 1 px ogni 100 ms..ma dopo un movimento si blocca tutto il browser !

Dove é l'errore?

Inoltre cosa dovrei mettere al posto di onclick=muovi() per fare in modo che la funzioni duri un tot di secondine quindi io possa controllare lo spazio che l'immagine ha precorso?

Grazie
Clhona

**Xinod** · 06-10-2010, 12:45

- setInterval che ricursivamente richiama se' stesso = un' infinita' di temporizzazioni quando a te ne serve una
se lasci cosi' le cose devi usare setTimeout

- setti sempre lo style prima a 0 poi lo muovi di 1 = ha perfettamente ragione quando lo muove di uno e poi sembra fermarsi

e' corretto rilevare via javascript una proprieta' dello stile che sia stata in precedenza settata via javascript o sia presente nello stile in linea dell' elemento, ma non puoi settarla nuovamente a zero ogni volta

smonta la funzione in 2 funzioni, la prima setta le proprieta' css e infine richiama l' altra,
l' altra modifica solo il left

il modo piu' semplice per bloccare l' animazione e non impostare un ulteriore setTimeout quando, in questa seconda funzione, si e' giunti al massimo valore da animare

**clhona** · 06-10-2010, 14:22

Grazie per l'aiuto...effettivamante se continua a tornare a zero fa un bel casino!Ho modificato cosi:

<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">


</script>
</head>
<body>

<img id=myImage src=images/p.png onclick=muovi()>

</body>
</html>

il modo piu' semplice per bloccare l' animazione e non impostare un ulteriore setTimeout quando, in questa seconda funzione, si e' giunti al massimo valore da animare

Non ho capito bene questa frase, ho provato con

<img id=myImage src=images/p.png onclick=setTimeout('muovi()',3000)>

ma ritarda solo di 3000 ms l'inizio dell'animazione!

Grazie ancora!

**Xinod** · 06-10-2010, 14:47

ancora... non puo' essere setInterval se richiama se' stesso, dev' essere setTimeout

il minimo indispensabile e'

codice:

function muovi(max){
var left=parseInt(move_obj.style.left);
if(left<max){
  move_obj.style.left = left+ 1 + 'px';//V progressiva
  setTimeout('muovi('+max+')', 100); // ogni 100 ms muove 1px 
}

onclick="muovi(100)"

ciao

**clhona** · 06-10-2010, 14:57

ti devo una bella biretta!

Grazie

Ciao

Discussione: muovere oggetto

Strumenti discussione

Ricerca discussione

Visualizza

muovere oggetto

Permessi di invio