Mover div na horizontal pelo eixo X
Pietro Gaião | agosto 22nd, 2009 | JavaScript DOM | No Comments »
Bem pessoal, estamos de volta com mais um post.
Hoje vou favar sobre como mover um elemento na horizontal (ex.: div) , através do eixo x.
Com esse exemplo, vocês irão desenvolver diversas aplicações como: carrossel de imagens, carrossel com vitrine de produtos e muito mais.
Tive o cuidado em testar esse script seguindo os padrões da W3C para que não haja nenhum problema com tipos de navegadores. Bem, testei apenas no Firefox e no IE e funcionou.
Notem que nesse exemplo exite a tag <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Vamos ao que interessa.
Fiz um script bem simples para que tenham uma melhor compreenção.
Primeiro, criaremos a div com o id=container que se movimentará.
Para começar-mos notem que existem os styles left:0; e o position: relative;,
<div id=container style="left:0; position: relative;">
<img src="http://www.pietrogaiao.com.br/blog/exemplos/blog-pietro.gif">
</div>
Logo em seguida, criaremos os botões de voltar e avançar.
Os botões chamarão as funções tras() e frente().
<input onClick="tras();" type=button value=voltar>
<input onClick="frente();" type=button value=avançar>
Agora vamos ao mais importante da festa. Vamos criar as funções responsáveis pela movimentação do elemento.
Procurei nomear as variáveis da melhor forma possível, para que não fiquem com nenhuma dúvida.
function frente() {
var movimento = setTimeout("frente()")
var speed = 5
var divContainer = document.getElementById("container").style
avancaDIV = parseInt(divContainer.left)+speed+"px"
if(avancaDIV=="300px") {
clearTimeout(movimento)
return false;
}
divContainer.left = avancaDIV
}
Vamos ver se entenderam.
Primeiro: crio a variável responsável pela movimentação do elemento var movimento = setTimeout(“frente()”)
Segundo: passo a velocidade que o elemento percorrerá. var speed = 5
Terceiro: seto a o elemento que se movimentará indicando que será pelo style var divContainer = document.getElementById(“container”).style
Quarto: informo de quantos em quantos pixels o elemento se deslocara na horizontal. No nosso caso é de 5 em 5px, até chegar no 300px que então entrará no passo Quinto.
Quinto: crio uma condição dizendo que quando o elemento chegar no pixel 300px, deverá parar.
Agora, para voltar, é só fazer ao contrário, informando a posição inicial.
Veja abaixo o script completo e um link para testar nossa aplicação.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pietro Gaião - Tutorial</title>
<style type="text/css">
#container { width:220px; height:50px; border:1px solid;}
#divleft { width:15px; height:50px;}
#divright { width:15px; height:50px;}
</style>
<script language=JavaScript>
function frente() {
var movimento = setTimeout("frente()")
var speed = 5
var divContainer = document.getElementById("container").style
avancaDIV = parseInt(divContainer.left)+speed+"px"
if(avancaDIV=="300px") {
clearTimeout(movimento)
return false;
}
divContainer.left = avancaDIV
}
function tras() {
var movimento = setTimeout("tras()")
var speed = -5
var divContainer = document.getElementById("container").style
recuaDIV = parseInt(divContainer.left)+speed+"px"
if(recuaDIV=="-5px" ) {
clearTimeout(movimento)
return false;
}
divContainer.left = recuaDIV
}
</script>
</head>
<body>
<div id=container style="left:0; position: relative;">
<img src="http://www.pietrogaiao.com.br/blog/exemplos/blog-pietro.gif">
</div>
<br>
<br>
<input onClick="tras();" type=button value=voltar>
<input onClick="frente();" type=button value=avançar>
</body>
</html>
Teste nossa aplicação. Como Mover div na horizontal pelo eixo X
É isso aí.
Fiquem a vontade para enviar comentários e para que possam aprimorar mais ainda os conhecimentos.
Até a próxima.
Popularity: 100% [?]
Gustavo Girard