JavaScript: Movendo objeto (elemento)

Respondendo a perguntas aqui no blog.

O mesmo efeito foi criado com JQuery e pode ser visto neste link.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Movendo elemento</title>
<style type="text/css">
*{padding:0; margin:0;}
#elemento{
  border:1px solid #FF0000; 
  width:180px; 
  height:80px;
  position:absolute; /* importante */
}
#btnMover{ border:1px solid #CCC; }
</style>
<script>
function move(elem, duracao) {
  // altura do botao
  var btnH	= document.getElementById('btnMover').offsetHeight;
  // valor da posição a esquerda do elemento
  var left 	= elem.clientLeft;
  // valor da posição topo do elemento
  var top       = btnH - elem.clientTop;
  // função a ser chamada até chegar a posição informada
  function deslocamento() {
    // incrementando contador
    left++;
    top++;
    // aplicando estilo no elemento
    elem.style.left = left + 'px';
    elem.style.top  = top + 'px';
    // verificando se chegou ao ponto desejado
    if (left == 200 || top == 200)
      // interrompe o processo de deslocamento 
      clearInterval(id);
    }
   // desloca o elemento até 10 segundos
   // aumentando o valor, vai demorar mais para chegar
   var id = setInterval(deslocamento, duracao);
}
</script>
</head>
<body>
<input type="button" id="btnMover" value="Mover" onclick="move(this.nextElementSibling, 10)">
<div id="elemento">clique para mover</div>
</body>
</html>

Detalhe: a lógica da linha 32 não ficou muito boa. O que chegar primeiro (top/left) aborta o deslocamento.

2 comentários em “JavaScript: Movendo objeto (elemento)

Deixe uma resposta para sergio Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *