Para deslocar uma camada pela tela, é necessário modificar os atributos Top e Left.
Top define a posição vertical da camada desde a parte superior da tela
Left define a posición horizontal da camada desde a parte esquerda da tela.
Ao modificar os valores de Top e Left conseguiremos o movimento da camada.
Por último, temos que redesenhar os valores que armazenam uma cadeia de texto com o valor e as unidades, por isso será necessário converter os valores que se armazenam dentro das propriedades antes de poder utiliza-los.
Por exemplo, um valor armazenado em top o left poderá ser 140px.
Por este motivo é necessário utilizar a função parseInt para poder converter os valores a números.
A seguir mostra-se um exemplo, que desloca uma camada 5 pixels cada vez que se clica o botão:
A função recebe por parâmetro o nome da camada que se deseja mover, acessa mediante a função getElementById à propriedade de top, mediante ParseInt a converte a um inteiro, soma 5 unidades, e a seguir escreve o novo valor no estilo da camada.
<script language="Javascript">
function mover(nomeCamada){
valor=document.getElementById(nomeCamada).style.top;
numero=parseInt(valor);
numero+=5;
document.getElementById(nomeCamada).style.top=numero;
}
</script>
Exemplo completo:
<html>
<head>
<title>Untitled</title>
<script language="Javascript">
function mover(nomeCamada){
valor=document.getElementById(nomeCamada).style.top;
numero=parseInt(valor);
numero+=5;
document.getElementById(nomeCamada).style.top=numero;
}
</script>
</head>
<body>
<div id="camada1" style="position:absolute;width:100;height:100;top:100;left:100;background-color:blue">Camada 1</div>
<form name="meuform" action="#">
<input type="button" onclick="mover('camada1')" value="Mover Camada">
</form>
</body>
</html>
Ver o exemplo
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em Os comentários dos visitantes são para ampliar a informação do artigo. Todos podem participar.
