[js]far muovere un div a dx e sx con setInterval

**alexforum** · 17-07-2008, 16:23

Codice PHP:


<html>

<head>

<style type="text/css">

#box{

    width: 100px;

    height: 100px;

    position: absolute;

    background: #ccc;

    left: 200px

}

</style>

<script type="text/javascript">

    window.onload = init;

    function start(direct){

        

        var mov = 5;

        var obj = document.getElementById('box');

        var curPos = obj.style.left;

                      alert(curPos)

        var fine = curPos.indexOf('px');

        var curPos =  Number(curPos.substring(0,fine));

        obj.style.left = parseInt(mov+curPos)+'px';

    }

    function init(){

        setInterval(function(){start('l');},500);

    }    

</script>

</head>

<body>

    <div id="box">il mio box !</div>

</body>

</html>

- il problema è che curPos parte da 0 anche se nel css è impostato a 200px, come si può fare?

- se dovessi fare spostare il div a sinistra ho provato cosi ma non funzia

Codice PHP:


obj.style.left = '-'+parseInt(mov+curPos)+'px';

grazie

**artorius** · 17-07-2008, 17:20

Prova cosi:

Codice PHP:


    window.onload = init;

    function start(direct){

        

        var mov = 5;

        var obj = document.getElementById('box');

        var str = getStyle(obj, 'left');

        var curPos = parseInt(str);

                

        

        obj.style.left = parseInt(mov+curPos)+'px';

        setTimeout(start,500, direct);

    }

    function init(){

        start('l')

    }

    

    function getStyle(oElm, strCssRule){

        var strValue = "";

        if (document.defaultView && document.defaultView.getComputedStyle) {

            strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);

        }

        else 

            if (oElm.currentStyle) {

                try {

                    strCssRule = strCssRule.replace(/\-(\w)/g, function(strMatch, p1){

                        return p1.toUpperCase();

                    });

                    strValue = oElm.currentStyle[strCssRule];

                } 

                catch (e) {

                // Used to prevent an error in IE 5.0

                }

                

            }

        return strValue;

    }

Ti raccomanderei però di utilizzare una libreria di Javascript che ha questo metodo implementato

**alexforum** · 17-07-2008, 21:04

grazie,
ho visto che usi uma marea di metodi a me sconosciuti

qualcosa di più semplice si riesce a fare? possibile che per far muovere un div bisogna complicarsi la vita in questo modo?

**alexforum** · 17-07-2008, 23:17

sono riuscito a buttar giù del codice funzionante, permette di muovere il div a destra e a sinistra
posto il codice

Codice PHP:


<html>

<head>

<title>JavaScript muovi div</title>

<script language="javascript" type="text/javascript">



var animation = {

    x: 0,

    timer: undefined,

    curX: 0,

    millisec: 30,

    moveRight: function(id){

        var self = this;    

        var layerElement = document.getElementById(id);     

        self.x+=10;

        layerElement.style.left=self.x;

        var timer = setTimeout(function(){self.moveRight(id)},self.millisec);

        self.timer = timer;

        self.curX = self.x;

    },

    

    clearTimer: function(){ 

        var self = this;

        clearInterval(self.timer);

    },

    

    moveLeft: function(id){

        var self = this;

        var layerElement = document.getElementById(id);

        self.x-=10;

        layerElement.style.left=self.x;

        var timer = setTimeout(function(){self.moveLeft(id)},self.millisec);

        self.timer = timer;

        self.curX = self.x;

    }

}





</script>

</head>



<body>

<style type="text/css">

#cont{

    position: relative;

    width: 600px;

    height: 400px;

    background: #ccff00;

    overflow: hidden;

}

#box{

    position: absolute;

    width: 100px;

    height: 100px;

    background: #ccc;

}

</style>

<div id="cont">

    <div id="box">il mio box !</div>

</div>

<input type="BUTTON" value="left" onmousedown="animation.moveLeft('box')" onmouseup="animation.clearTimer()" />

<input type="BUTTON" value="right" onmousedown="animation.moveRight('box')" onmouseup="animation.clearTimer()" />



</body>

</html>

la proprietà animation.curX mi permette di rilevare l' attuale posizione del div, utile magari in uno script

secondo voi va bene, oppure si può migliorare il codice?

**artorius** · 18-07-2008, 12:21

Non è male, ma la funzione va soltanto su Opera e (penso) su Explorer.
Firefox e Safari no.

Non saprei dirti il motivo, ma pare che su Firefox le funzioni non vengano chiamate...

**alexforum** · 18-07-2008, 14:21

Originariamente inviato da artorius
Non è male, ma la funzione va soltanto su Opera e (penso) su Explorer.
Firefox e Safari no.

Non saprei dirti il motivo, ma pare che su Firefox le funzioni non vengano chiamate...

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>JavaScript div move</title>

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

<script  type="text/javascript">



var animation = {

    x: 0,

    timer: undefined,

    curX: 0,

    millisec: 30,

    moveRight: function(id){

        var self = this;    

        var layerElement = document.getElementById(id);     

        self.x+=10;

        layerElement.style.left=self.x;

        var timer = setTimeout(function(){self.moveRight(id)},self.millisec);

        self.timer = timer;

        self.curX = self.x;

    },

    

    clearTimer: function(){ 

        var self = this;

        clearInterval(self.timer);

    },

    

    moveLeft: function(id){

        var self = this;

        var layerElement = document.getElementById(id);

        self.x-=10;

        layerElement.style.left=self.x;

        var timer = setTimeout(function(){self.moveLeft(id)},self.millisec);

        self.timer = timer;

        self.curX = self.x;

    }

}



</script>

<style type="text/css">

#cont{

    position: relative;

    width: 600px;

    height: 400px;

    background: #ccff00;

    overflow: hidden;

}

#box{

    position: absolute;

    width: 100px;

    height: 100px;

    background: #ccc;

}

</style>



</head>



<body>

<div id="cont">

    <div id="box">il mio box !</div>

</div>





<input type="BUTTON" value="left" onmousedown="animation.moveLeft('box')" onmouseup="animation.clearTimer()">

<input type="BUTTON" value="right" onmousedown="animation.moveRight('box')" onmouseup="animation.clearTimer()">

</p>



</body>

</html>

testato su:
- WIn IE 6.0 ok
- Win Opera 9.51 ok
- Win Mozilla Firefox 2.0.0.13 ok

Discussione: [js]far muovere un div a dx e sx con setInterval

Strumenti discussione

Ricerca discussione

Visualizza

[js]far muovere un div a dx e sx con setInterval

Re: [js]far muovere un div a dx e sx con setInterval

Permessi di invio