Muovere immagine

**Arrenvs** · 30-03-2013, 16:28

Ciao ragazzi devo far muovere un immagine in orizzontale su uno sfondo, deve arrivare alla fine della pagina (quindi muoversi sull'asse delle x da 0px a 1000px) e poi scomparire fuori dalla pagina per poi ricomparire di nuovo a 0px. una cosa tipo questa:

http://visitbruges.be

io al momento ho fatto questa, non so però come far ripartire il div da capo...

<html>

<div id="muovi"> *** HTML.it *** </div>
<script type="text/javascript">

var startx = 0;
function Sposta(div)
{
if(startx < 300) {
document.getElementById(div).style.marginLeft = "+" + startx + "px";
startx+=5;
setTimeout("Sposta('" + div + "')",50);
}
}

Sposta('muovi');

</script>

</html>

**lucavizzi** · 30-03-2013, 16:49

Devi aggiungere un "else" all'if in cui specifichi cosa deve fare il div quando arriva a "fine corsa".

**Arrenvs** · 30-03-2013, 21:57

quindi verrebbe così? :

<html>

<div id="muovi"> *** HTML.it *** </div>
<script type="text/javascript">

var startx = 0;
function Sposta(div)
{
if(startx < 300) {
document.getElementById(div).style.marginLeft = "+" + startx + "px";
startx+=5;
setTimeout("Sposta('" + div + "')",50);
else
document.getElementById(div).style.marginLeft = 0px;
}
}

Sposta('muovi');

</script>

</html>

**Arrenvs** · 31-03-2013, 17:29

Sono riuscito ad arrivare all' effetto richiesto, il problema è che se voglio ripetere la funzione più volte l'animazione risulta accelerata alle prime esecuzioni per poi arrivare alla velocità giusta solo all'ultima esecuzione, come mai? vi posto il codice:

<html>

<div id="muovi"> HTML </div>
<script type="text/javascript">

var startx = 0;

function Sposta(div)

{
if(startx < 1000)
{
document.getElementById(div).style.marginLeft = "+" + startx + "px";
startx+=1;
setTimeout("Sposta('" + div + "')",50);
}
else
{
document.getElementById(div).style.marginLeft = "0px";
startx=0;
}
}

for (var i=0;i<10;i++)

{
Sposta('muovi');
}

</script>

</html>

**lucavizzi** · 31-03-2013, 18:52

Il ciclo for lancia dieci volte Sposta() quasi nello stesso istante, non usarlo. Usa solo la ricorsività.

**Arrenvs** · 01-04-2013, 00:03

Scusa cosa intendi per ricorsività? ho visto che lo fa anche se semplicemente scrivo sposta() più volte senza ciclo... è strano però, non dovrebbe far finire l'esecuzione di sposta() prima di lanciarla nuovamente? e quindi non dovrebbe dare problemi...

**lucavizzi** · 01-04-2013, 10:56

La ricorsività è un concetto di informatica generale, sta ad indicare una funzione che richiama se stessa.

Il bug, nel run-time del tuo script, risiede nel fatto che il metodo setTimeou() non si comporta, come ti aspetti tu, in maniera sincrona.
Cioè: l'interprete javascript, non attende la conclusione del primo setTimeout() per poi lanciare il secondo.
Semplicemente inizializza il timer (setTimeout) e passa immediatamente al rigo successivo che è un altro setTimeout facendo sovrapporre le animazioni.

Edit:

non dovrebbe far finire l'esecuzione di sposta() prima di lanciarla nuovamente?

La funzione sposta si comporta in maniera sincrona, è il setTimeout che è asincrono.

**Arrenvs** · 02-04-2013, 14:32

ah ecco perche! grazie della risposta! mi sto informando sulla ricorsività ma non riesco a capire come applicarla concretamente qui... qualche suggerimento?

**lucavizzi** · 02-04-2013, 19:36

Già la applichi, quando richiami Sposta() nel setTimeout...

Discussione: Muovere immagine

Strumenti discussione

Ricerca discussione

Visualizza

Muovere immagine

Permessi di invio