PDA

View Full Version : JavaScript... efeito Motion

jtcgomes
08-06-2007, 03:31
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:


<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áginaA 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:

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?
capricorn
08-06-2007, 11:53
simple as that:


</div>


repare que não tem espaço (</ div> está errado)
jtcgomes
08-06-2007, 13:53
Mas continuo sem sucesso... :(

O meu problema axo k se prende na função saltar
p3dro
08-06-2007, 14:28
vê se isto resolve o teu problema ...

<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>
jtcgomes
08-06-2007, 14:34
a tua ideia é boa, mas tb não dá.
tive k mudar o nome á variavel, pois DIV é uma palavra reservada, mas continua sem mover..
p3dro
08-06-2007, 15:42
a tua ideia é boa, mas tb não dá.
tive k mudar o nome á variavel, pois DIV é uma palavra reservada, mas continua sem mover..

não dá? :wow: experimentei esse código com o ff2.0 e ie6 e os bonecos movem-se ... weird
capricorn
08-06-2007, 15:50
<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>
jtcgomes
08-06-2007, 15:59
capricorn (http://www.techzonept.com/member.php?u=24633) OBRIGADÃO..

não me estava a lembrar desse getElementById

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