JavaScript... efeito Motion

jtcgomes

jtcgomes

Power Member
Boas noites pessoal... tenho aki uma pequena duvida
Por exemplo: tenho dois objectos.
Kero mover apenas 1, um objecto chama-se "k10" o outro "k20".
Criei a funcao mover, onde o primeiro parâmetro de entrada é ndiv, k seria o nome do objecto.
o código é o seguinte:

Código: 
<html>
    <head>
    <title>Move Abelha</title>
    <style type="text/css">
        body{background-color:#bbb;} 
        #ctrls{font-family:verdana; font-size:12px; font-weight:bold;}
        #f{position:absolute; left:0px; top:0px;}
        #k10{position:absolute; left:0px; top:50px;}
        #k20{position:absolute; left:300px; top:50px;}
    </style>
    <script language="JavaScript">
    var cont, ndiv, nSaltos, tSalto, x , y, xf, yf , dx, dy, interv;
        //------------------------------------
         function Saltar(ndiv){    
        k10.style.left = x;
        k10.style.top = y;
        x+=dx;
        y+=dy;
        cont++;
        if(cont > 50) clearInterval(interv);        
        }
        //------------------------------------
        function Mover(ndiv,x1,y1,x2,y2,nSaltos,tSalto){
        clearInterval(interv);
        cont=0;
        x = parseInt(x1);
        y = parseInt(y1);
        xf = parseInt(x2);
        yf = parseInt(y2);
        dx = (xf-x)/nSaltos;
        dy = (yf-y)/nSaltos;
        interv= setInterval("Saltar()",tSalto);    
        }     
        
           
        function moved(){
            Mover(10,10,10,220,350,50,20);
        }
    </script>
    </head>
    <body>
     <div id="ctrls">
      <form id="f">
         <input type="button" value="Mover" onClick="Mover(10,10,10,220,350,50,20)" />   
     <div id="k10">
     <img src="http://www.reinodosgifs.hpg.ig.com.br/gifs_bonecas/kiki_011.gif" />
     </ div>       
     
     <div id="k20">
     <img src="http://www.reinodosgifs.hpg.ig.com.br/gifs_bonecas/new_angel_008.gif" />
     </ div>
       </form>
     </div>
    </body>
</html>
Se guardarem o code como html conseguem vizualizar a página
Clicar para expandir...
A minha duvida tá no Mover(ndiv,x1,y1,x2,y2,nSaltos,tSalto)
quando aparece interv= setInterval("Saltar()",tSalto); não deveria meter:
interv= setInterval("Saltar(ndiv)",tSalto);

Mudando tb a função saltar para:
Código: 
        function Saltar(ndiv){    
        eval ('k' + ndiv + '.style.top=(y)');
        eval ('k' + ndiv + '.style.left=(x)');
        x+=dx;
        y+=dy;
        cont++;
        if(cont > 50) clearInterval(interv);        
        }

Mas....
O meu problema é k movem sempre os dois.
E cria mover ou um ou outro mediante
Mover(10,10,10,220,350,50,20) para o 10
Mover(20,10,10,220,350,50,20) para o 20

Será k alguem me consegue ajudar?
 
vê se isto resolve o teu problema ...

Código: 
<html>
    <head>
    <title>Move Abelha</title>
    <style type="text/css">
        body{background-color:#bbb;} 
        #ctrls{font-family:verdana; font-size:12px; font-weight:bold;}
        #f{position:absolute; left:0px; top:0px;}
        #k10{position:absolute; left:0px; top:50px;}
        #k20{position:absolute; left:300px; top:50px;}
    </style>
    <script language="JavaScript">
      var cont, ndiv, nSaltos, tSalto, x , y, xf, yf , dx, dy, interv;
        //------------------------------------
        function Saltar(ndiv){
            var div=document.getElementById("k"+ndiv);
            div.style.left = x;
            div.style.top = y;
            x+=dx;
            y+=dy;
            cont++;
            if(cont > 50) clearInterval(interv);
        }        
        //------------------------------------
        function Mover(ndiv,x1,y1,x2,y2,nSaltos,tSalto){
          clearInterval(interv);
          cont=0;
          x = parseInt(x1);
          y = parseInt(y1);
          xf = parseInt(x2);
          yf = parseInt(y2);
          dx = (xf-x)/nSaltos;
          dy = (yf-y)/nSaltos;
          interv= setInterval("Saltar('"+ndiv+"')",tSalto);    
        }     
        
        function moved(){
            Mover(10,10,10,220,350,50,20);
        }
    </script>
    </head>
    <body>
     <div id="ctrls">
      <form id="f">
         <input type="button" value="Mover" onClick="Mover(10,10,10,220,350,50,20)" />   
         <div id="k10">
          <img src="http://www.reinodosgifs.hpg.ig.com.br/gifs_bonecas/kiki_011.gif" />
         </div>       
     
         <div id="k20">
          <img src="http://www.reinodosgifs.hpg.ig.com.br/gifs_bonecas/new_angel_008.gif" />
         </div>
       </form>
     </div>
    </body>
</html>
 
a tua ideia é boa, mas tb não dá.
tive k mudar o nome á variavel, pois DIV é uma palavra reservada, mas continua sem mover..
 
Código: 
<html>
    <head>
    <title>Move Abelha</title>
    <style type="text/css">
        body{background-color:#bbb;} 
        #ctrls{font-family:verdana; font-size:12px; font-weight:bold;}
        #f{position:absolute; left:0px; top:0px;}
        #k10{position:absolute; left:0px; top:50px;}
        #k20{position:absolute; left:300px; top:50px;}
    </style>
    <script language="JavaScript">
    var cont, ndiv, nSaltos, tSalto, x , y, xf, yf , dx, dy, interv;
        //------------------------------------

    function Saltar(ndiv){
        document.getElementById(ndiv).style.left = x;
        document.getElementById(ndiv).style.top = y;
        x+=dx;
        y+=dy;
        cont++;
        if(cont > 50) clearInterval(interv);
    }

        //------------------------------------

    function Mover(ndiv,x1,y1,x2,y2,nSaltos,tSalto){
        clearInterval(interv);
        cont=0;
        x = parseInt(x1);
        y = parseInt(y1);
        xf = parseInt(x2);
        yf = parseInt(y2);
        dx = (xf-x)/nSaltos;
        dy = (yf-y)/nSaltos;
        interv= setInterval("Saltar('"+ndiv+"')",tSalto);
    }

    </script>
    </head>
    <body>
      <form id="f">
         <input type="button" value="Mover 1" onClick="Mover('k10',10,10,220,350,50,20)" />   
         <input type="button" value="Mover 2" onClick="Mover('k20',10,10,220,350,50,20)" />   
      </form>
     <div id="k10">
     <img src="http://www.reinodosgifs.hpg.ig.com.br/gifs_bonecas/kiki_011.gif" />
     </div>
     <div id="k20">
     <img src="http://www.reinodosgifs.hpg.ig.com.br/gifs_bonecas/new_angel_008.gif" />
     </div>
    </body>
</html>
 
Inicie sessão ou registe-se para poder participar.
Back
Topo