Bem, o código pode ser muito resumido, mas prefiro colocar assim, ao invés de criar uma biblioteca.
Bem, o código é o seguinte:
<img src="pink.jpg" id="car" style="position:absolute; left:150px; top:10px;" name="car">
<body onload="andar();">
<script language="javascript">
<!--
// Script por Fernando Martins de Toledo, Unidade II do Farias Brito
var timer,timer2,timer3;
var pos=parseInt(car.style.top);
function andar() {
pos+=5;
car.style.top=pos;
timer=window.setTimeout("andar();",100);
if (car.style.top == "330px") {
sobe();
}
}
function sobe() {
window.clearTimeout(timer);
pos-=5;
car.style.top=pos;
timer2=window.setTimeout("sobe();",100);
if (car.style.top == "315px") {
baixa();
}
}
function baixa() {
window.clearTimeout(timer2);
pos+=5;
car.style.top=pos;
timer3=window.setTimeout("baixa();",100);
if (car.style.top == "330px") {
parar();
}
}
function parar() {
window.clearTimeout(timer3);
}
//-->
</script>
Para o melhor entendimento desse script, é necessário ter uma noção de DHTML (CSS+JAVASCRIPT).
Primeiro, abrimos a tag <body>, que, com o handler onload, irá executar uma função.
Depois, colocamos a imagem, com o id car.
Depois, a tag <script>.
Lá, definimos variáveis locais para globais.
Criamos a primeira função (andar()).
Antes dela, colocamos em um número não-decimal a quantidade de pixels da propriedade top do CSS, da imagem.
Depois, definimos um valor (5), ou seja, irá andar de 5 em 5px.
Depois, colocamos o valor, que está na variável pos no novo valor da propriedade top, do css.
Executamos um temporizador, que irá no caso, repetir sempre a função. Abrimos um condicional, que irá fazer que, com a quantidade determinada de pixels, ele suba um pouco.
Depois, vamos criar a outra função. É a mesma coisa, só que iremos subir a imagem.
Depois, abaixamos a imagem.
Depois, paramos e pronto!
A imagem é meu avatar. Ele tá em anexo.
Attached Files
-
pink.jpg 4.61KB
0 downloads
Edição feita por: Without a Nick, 05/05/2004, 14:15.
