div movimento animato

frank92

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

linoma

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

frank92


<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

Per andare cs partiranno un centinaio di timer.

ayrton2001

Ciao frank92,
prova cosi:


<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

@linoma said:

Per andare cs partiranno un centinaio di timer.
Ciao linoma, che intendi con "cs" ?

linoma

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

Cmq ho fatto anch'io qualche prova e posto il 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