Blackout Design -Saiba mais sobre design e system: Como mover uma div na horinzotal pelo eixo x

Aviso!Mover div não é facil requer algum treino.

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;,

1

2

3

<div id=container style="left:0; position: relative;">
    <img src="Aqui o link da imagen">
</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=" O Link da imagen">
</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.

kyo

document.write(ultimaFecha);