RSS

Saiba como mover uma div na horizontal pelo eixo X

Pietro Gaião | agosto 22nd, 2009 | JavaScript | No Comments »

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.

Testei 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">.

Primeiro, criaremos a div com o id=container que se movimentará.

Para começar, 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().

Agora o mais importante da festa. Vamos criar as funções responsáveis pela movimentação do elemento.

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:

1) crio a variável responsável pela movimentação do elemento var movimento = setTimeout(“frente()”)

2) passo a velocidade que o elemento percorrerá. var speed = 5

3) seto a o elemento que se movimentará indicando que será pelo style var divContainer = document.getElementById(“container”).style

4) 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.

5) 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>

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

Confira também:

Popularity: 100% [?]

Tags:, , , ,

Leave a Reply