Alguns dias atrás tirei 15 minutos de meu trabalho para fazer algo com um efeito de uma bola quicando em uma area definida no browser usando javascript ( não irei contar a verdadeira história que me levou a fazer isso, pois é algo longo . ), e como vi que ficou legal, achei bacana mostrar isso para vocês.
Espero que esse exemplo ajude alguém a ter novas ideias! 😉
Antes de colar o fonte + o link demo, quero dizer que somente testei esse efeito no Firefox e Chrome se alguém puder me da um feedback, ficarei feliz! 🙂
//Autor: Francke Peixoto - 27 / Agosto / 2009
var LIMITE_Y = 200,LIMITE_X = 200,LIMITE_BARRA = 0,DELAY = 10, VELOCIDADE = 2, X = 0, Y = 0;
var PAUSE = false;
var SENTIDO_Y = "D", SENTIDO_X= "B";
window.onload = function(){
var BOX = document.getElementById("box");
var BARRA = document.getElementById("bloco");
var AREA = document.getElementById("area");
BARRA.style.left = 75;
BARRA.style.top = 100;
BOX.style.left = X;
BOX.style.top = Y;
var LIMITE_BARRA_X = parseInt(BARRA.style.top.replace("px",""))-parseInt(BOX.offsetHeight)-parseInt(BARRA.offsetWidth);
var LIMITE_BARRA_Y = parseInt(BARRA.style.left.replace("px",""))+parseInt(BOX.offsetWidth);
window.setInterval(function() {
if(PAUSE) {
if (Y >= LIMITE_Y) SENTIDO_Y = "E";
if (Y <= 0) SENTIDO_Y = "D"; Y = (SENTIDO_Y == "D") ? (Y+VELOCIDADE): (Y-VELOCIDADE); if (X >= LIMITE_X) SENTIDO_X = "C";
if (X <= 0) SENTIDO_X = "B";
X = (SENTIDO_X == "B") ? (X+VELOCIDADE) : (X-VELOCIDADE);
if((X == LIMITE_BARRA_X && Y <= LIMITE_BARRA_Y)) SENTIDO_X = "C";
if(X <= (LIMITE_BARRA_X+parseInt(BARRA.offsetWidth)+parseInt(BARRA.offsetHeight)) && Y <= parseInt(BOX.offsetHeight+BARRA.offsetHeight)) { if(X == (LIMITE_BARRA_X+BARRA.offsetWidth+BARRA.offsetHeight))SENTIDO_Y = "E"; else if (X > LIMITE_BARRA_X && X <= (parseInt(BOX.offsetHeight)+LIMITE_BARRA_X)){
SENTIDO_X = "B";
SENTIDO_Y = "D";
}
AREA.style.backgroundColor= (AREA.style.backgroundColor == 'green' ? 'white' : 'green');
}
BOX.style.left = Y;
BOX.style.top = X;
}
},DELAY);
}
DEMO : https://aspx.xmasters.com.br/bolinha/
