1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

JavaScript... efeito Motion

Discussão em 'Web Development' iniciada por jtcgomes, 8 de Junho de 2007. (Respostas: 7; Visualizações: 1255)

  1. 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>       
    
    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?
     
  2. capricorn

    capricorn Power Member

    simple as that:

    Código:
    </div>
    
    repare que não tem espaço (</ div> está errado)
     
  3. jtcgomes

    jtcgomes Power Member

    Mas continuo sem sucesso... :(

    O meu problema axo k se prende na função saltar
     
  4. p3dro

    p3dro Power Member

    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>
     
  5. jtcgomes

    jtcgomes Power Member

    a tua ideia é boa, mas tb não dá.
    tive k mudar o nome á variavel, pois DIV é uma palavra reservada, mas continua sem mover..
     
  6. p3dro

    p3dro Power Member

    não dá? :wow: experimentei esse código com o ff2.0 e ie6 e os bonecos movem-se ... weird
     
    Última edição: 8 de Junho de 2007
  7. capricorn

    capricorn Power Member

    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>
    
     
  8. jtcgomes

    jtcgomes Power Member

    capricorn OBRIGADÃO..

    não me estava a lembrar desse getElementById

    Obrigado a todos pela ajuda.
    Agora vou tentar mover um baralho de cartas inteiro...
     

Partilhar esta Página