» div movimento animato

frank92 · 03-10-10, 15:57

ciao a tutti ragazzi,
vorrei uno script che se per esempio in php ho le coordinate di un div:
ATTUALI: x=10, y=10
SUCCESSIVE: x=20, y=30,
come devo fare lato javascript per creare l'effetto del movimento?
Voglio che si veda proprio il movimento del div che si sposta
da un punto ad un altro

grazie in anticipo

linoma · 03-10-10, 16:09

Devi crearti un timer nel quale cambi la posizione del div di N pixels, in javascript.

frank92 · 03-10-10, 16:36

Codice:

<html>
<head>
<title>DOM Drag Demo</title>
<script type="text/javascript">
        var div = null;
        var tmp = 0;
        var ret = "200px";
        
        function init() {
            div = document.getElementById("riquadro3"); //DIV da animare
            div.style.top = "130px"; //Punto di partenza dell’animazione
            animate(); //Chiamata alla funzione che anima il div
        }

        function animate() {
            div.style.top = parseInt(div.style.top)+1+"px";//Sposta il div verso l'alto di un pixel alla volta
            if(div.style.top<ret) {
            setTimeout(animate(),1000);
            }else{
            stop();
            }
        }
        
        function stop() {
        }

        window.onload = init; //fa iniziare l'animazione al caricamento della pagina
        
    </script>
<style type="text/css">
#riquadro3
{
float: left;
position: relative;
width: 150px;
height: 300px;
margin: 0px;
margin-right:15px;
margin-bottom: -60px;
top: -90px;
z-index: 2;
}

</style>
</head>

<body>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="riquadro3">
fgdfgdfh</div>
</body>
</html>

Cos'è che non va?
Non fa il movimento ma va subbito nella posizione!

linoma · 03-10-10, 20:36

Per andare cs partiranno un centinaio di timer.

ayrton2001 · 04-10-10, 14:54

Ciao frank92,
prova cosi:

Codice:

<script type="text/javascript">
        var div = null;
        var tmp = 0;
        var ret = "200px";
        
        function init() {
            div = document.getElementById("riquadro3"); //DIV da animare
            div.style.top = "130px"; //Punto di partenza dell’animazione
            animate(); //Chiamata alla funzione che anima il div
        }

        function animate() {
            div.style.top = parseInt(div.style.top.replace("px", ""))+1+"px";//Sposta il div verso l'alto di un pixel alla volta
            if(div.style.top.replace("px", "") < ret.replace("px", "")) {
            setTimeout("animate()",1000);
            }
        }
        
        window.onload = init; //fa iniziare l'animazione al caricamento della pagina
        
    </script>

ayrton2001 · 04-10-10, 14:55

Quote:

linoma

Per andare cs partiranno un centinaio di timer.

Ciao linoma, che intendi con "cs" ?

linoma · 04-10-10, 19:23

Purtroppo il forum non supporta i bbcode 2.0

Cmq per togliere qualsiasi dubbio sta a significare cosi'.
Ho semplicemente provato lo script ed aggiunge + volte lo step indicato, dovrebbe significare che il timer viene richiamato + volte.

linoma · 05-10-10, 06:52

Cmq ho fatto anch'io qualche prova e posto il codice

Codice:

<html>
<head>
<title>DOM Drag Demo</title>
<script type="text/javascript">
        var timer;
        var tmp = 0;
        var ret = "200";
        
        function init() {           
            div = document.getElementById("riquadro3"); //DIV da animare
            div.style.top = "30px"; //Punto di partenza dell’animazione
            tim = window.setInterval("animate(div)",100);
        }

        function animate(div) {
            var y;
            
            y = parseInt(div.style.top);
            y++;                
            if(y > ret)
                clearInterval(timer);
            div.style.top = y + "px";
        }
        

        window.onload = init; //fa iniziare l'animazione al caricamento della pagina
        
    </script>
<style type="text/css">
#riquadro3
{
position:relative;
width: 150px;
height: 300px;
margin: 0px;
margin-right:15px;
margin-bottom: -60px;
top: -90px;
z-index: 2;
}

</style>
</head>

<body>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="riquadro3">
fgdfgdfh</div>
</body>
</html

03-10-10, 15:57	#1 (permalink)
frank92 Banned Data di registrazione: Mar 2009 Messaggi: 126	div movimento animato ciao a tutti ragazzi, vorrei uno script che se per esempio in php ho le coordinate di un div: ATTUALI: x=10, y=10 SUCCESSIVE: x=20, y=30, come devo fare lato javascript per creare l'effetto del movimento? Voglio che si veda proprio il movimento del div che si sposta da un punto ad un altro grazie in anticipo

03-10-10, 16:09	#2 (permalink)
linoma User Data di registrazione: Jun 2010 Messaggi: 193	Devi crearti un timer nel quale cambi la posizione del div di N pixels, in javascript.
	__________________ Siti Web

03-10-10, 16:36	#3 (permalink)
frank92 Banned Data di registrazione: Mar 2009 Messaggi: 126	Codice: <html> <head> <title>DOM Drag Demo</title> <script type="text/javascript"> var div = null; var tmp = 0; var ret = "200px"; function init() { div = document.getElementById("riquadro3"); //DIV da animare div.style.top = "130px"; //Punto di partenza dell’animazione animate(); //Chiamata alla funzione che anima il div } function animate() { div.style.top = parseInt(div.style.top)+1+"px";//Sposta il div verso l'alto di un pixel alla volta if(div.style.top<ret) { setTimeout(animate(),1000); }else{ stop(); } } function stop() { } window.onload = init; //fa iniziare l'animazione al caricamento della pagina </script> <style type="text/css"> #riquadro3 { float: left; position: relative; width: 150px; height: 300px; margin: 0px; margin-right:15px; margin-bottom: -60px; top: -90px; z-index: 2; } </style> </head> <body> <div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="riquadro3"> fgdfgdfh</div> </body> </html> Cos'è che non va? Non fa il movimento ma va subbito nella posizione!
	Ultima modifica di frank92 : 03-10-10 16:38.

03-10-10, 20:36	#4 (permalink)
linoma User Data di registrazione: Jun 2010 Messaggi: 193	Per andare cs partiranno un centinaio di timer.
	__________________ Siti Web

04-10-10, 14:54	#5 (permalink)
ayrton2001 Moderatore Data di registrazione: Jul 2006 Ubicazione: Bagheria Messaggi: 1,145	Ciao frank92, prova cosi: Codice: <script type="text/javascript"> var div = null; var tmp = 0; var ret = "200px"; function init() { div = document.getElementById("riquadro3"); //DIV da animare div.style.top = "130px"; //Punto di partenza dell’animazione animate(); //Chiamata alla funzione che anima il div } function animate() { div.style.top = parseInt(div.style.top.replace("px", ""))+1+"px";//Sposta il div verso l'alto di un pixel alla volta if(div.style.top.replace("px", "") < ret.replace("px", "")) { setTimeout("animate()",1000); } } window.onload = init; //fa iniziare l'animazione al caricamento della pagina </script>
	__________________ Andrea Cardinale \| Andrea Cardinale Blog \| Seguimi su twitter

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

04-10-10, 19:23	#7 (permalink)
linoma User Data di registrazione: Jun 2010 Messaggi: 193	Purtroppo il forum non supporta i bbcode 2.0 Cmq per togliere qualsiasi dubbio sta a significare cosi'. Ho semplicemente provato lo script ed aggiunge + volte lo step indicato, dovrebbe significare che il timer viene richiamato + volte.
	__________________ Siti Web

05-10-10, 06:52	#8 (permalink)
linoma User Data di registrazione: Jun 2010 Messaggi: 193	Cmq ho fatto anch'io qualche prova e posto il codice Codice: <html> <head> <title>DOM Drag Demo</title> <script type="text/javascript"> var timer; var tmp = 0; var ret = "200"; function init() { div = document.getElementById("riquadro3"); //DIV da animare div.style.top = "30px"; //Punto di partenza dell’animazione tim = window.setInterval("animate(div)",100); } function animate(div) { var y; y = parseInt(div.style.top); y++; if(y > ret) clearInterval(timer); div.style.top = y + "px"; } window.onload = init; //fa iniziare l'animazione al caricamento della pagina </script> <style type="text/css"> #riquadro3 { position:relative; width: 150px; height: 300px; margin: 0px; margin-right:15px; margin-bottom: -60px; top: -90px; z-index: 2; } </style> </head> <body> <div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="riquadro3"> fgdfgdfh</div> </body> </html
	__________________ Siti Web

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email