Bola Saltitante



Este script recebi da amiga Natividade Cruz. Obrigada pelo carinho, Natividade!

O efeito é de uma bola saltitante que ela batizou como "bola saltitona".

Veja um exemplo aqui.

(Para visualiza o efeito, é necessário clicar na bolinha.)

Primeiro salve esta imagem em sua pasta de imagens ou, se preferir, use o seguinte endereço no espaço marcado em vermelho: "http://www.ilove.com.br/lili/imagens/bola.gif"

Abra uma nova mensagem, clique na aba "Origem" e cole o seguinte código, depois da tag </Head>, lembrando-se de indicar o endereço da imagem no espaço que escrevi em vermelho:

<SCRIPT language=JavaScript1.2>
<!-- Original: Dragos Saracu (smardoi@yahoo.com) -->
<!-- Cross Browser by: Bob Simpson (webmaster@maryjanebrown.net) -->
<!-- Contributor URL: http://www.maryjanebrown.net/webmaster -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function BrowserCheck() {
var b = navigator.appName;
if (b == "Netscape") this.b = "NS";
else if (b == "Microsoft Internet Explorer") this.b = "IE";
else this.b = b;
this.v = parseInt(navigator.appVersion);
this.NS = (this.b == "NS" && this.v>=4);
this.NS4 = (this.b == "NS" && this.v == 4);
this.NS5 = (this.b == "NS" && this.v == 5);
this.IE = (this.b == "IE" && this.v>=4);
this.IE4 = (navigator.userAgent.indexOf('MSIE 4')>0);
this.IE5 = (navigator.userAgent.indexOf('MSIE 5')>0);
if (this.IE5 || this.NS5) this.VER5 = true;
if (this.IE4 || this.NS4) this.VER4 = true;
this.OLD = (! this.VER5 && ! this.VER4) ? true : false;
this.min = (this.NS||this.IE);
}
is = new BrowserCheck();
// End -->
</SCRIPT>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<META content="MSHTML 6.00.2716.2200" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff>
<DIV>&nbsp;</DIV>
<DIV style="FONT: 10pt arial">
<DIV>&nbsp;</DIV></DIV>
<DIV><BR></DIV>
<DIV id=staticBall style="VISIBILITY: visible; POSITION: relative"><IMG
height=30 alt="Static ball" src="endereço da imagem"
width=30> </DIV>
<CENTER></CENTER>
<DIV id=ball
style="LEFT: 100px; VISIBILITY: hidden; WIDTH: 34px; POSITION: absolute; TOP: 10px; HEIGHT: 34px"><IMG
height=30 alt="Bouncing ball"
src="http://javascript.internet.com/img/ball-drop/ball.gif" width=30> </DIV>
<SCRIPT language=Javascript1.2>
<!-- Begin
iter = 0;
setId = 0;
down = true;
up = false;
bouncingBall = (is.VER5) ? document.getElementById("ball").style
: (is.NS) ? document.layers["ball"]
: document.all["ball"].style;
stillBall = (is.VER5) ? document.getElementById("staticBall").style
: (is.NS) ? document.layers["staticBall"] : document.all["staticBall"].style;
winH = (is.NS) ? window.innerHeight - 55 : document.body.offsetHeight - 55;
document.onmouseup = buttonUp;
if (is.NS4)
document.captureEvents(Event.MOUSEUP);
function buttonUp(e) {
if ( ((is.NS) ? e.which : event.button) != 1) return true;
if (setId != 0) clearInterval(setId);
bouncingBall.visibility="visible";
stillBall.visibility="hidden";
bouncingBall.left = (is.NS) ? e.pageX - 15 : event.offsetX - 15;
bouncingBall.top = (is.NS) ? e.pageY - 15 : event.offsetY - 15;
iter = 0;
setId = setInterval("generateGravity()", 20);
return true;
}
function generateGravity() {
if ((parseInt(bouncingBall.top)+iter < winH) && down) {
bouncingBall.top = parseInt(bouncingBall.top) + iter;
iter++;
return;
}
else {
if ((parseInt(bouncingBall.top)< winH) && down) {
bouncingBall.top = winH + 5;
return;
}
down = false;
up = true;
if (iter < 0 && parseInt(bouncingBall.top) > winH) {
clearInterval(setId);
bouncingBall.visibility = "hidden";
stillBall.visibility="visible";
setId = 0;
}
if (parseInt(bouncingBall.top) > 0 && up && iter >= 0) {
bouncingBall.top = parseInt(bouncingBall.top) - iter;
iter--;
if (iter%3 == 0) iter--;
return;
}
down = true;
up = false;
}
}
// End -->
</SCRIPT>

Se preferir o código completo, basta apagar tudo o que aparece na aba Origem e colar o seguinte código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2716.2200" name=GENERATOR>
<STYLE></STYLE>

<SCRIPT language=JavaScript1.2>
<!-- Original: Dragos Saracu (smardoi@yahoo.com) -->
<!-- Cross Browser by: Bob Simpson (webmaster@maryjanebrown.net) -->
<!-- Contributor URL: http://www.maryjanebrown.net/webmaster -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function BrowserCheck() {
var b = navigator.appName;
if (b == "Netscape") this.b = "NS";
else if (b == "Microsoft Internet Explorer") this.b = "IE";
else this.b = b;
this.v = parseInt(navigator.appVersion);
this.NS = (this.b == "NS" && this.v>=4);
this.NS4 = (this.b == "NS" && this.v == 4);
this.NS5 = (this.b == "NS" && this.v == 5);
this.IE = (this.b == "IE" && this.v>=4);
this.IE4 = (navigator.userAgent.indexOf('MSIE 4')>0);
this.IE5 = (navigator.userAgent.indexOf('MSIE 5')>0);
if (this.IE5 || this.NS5) this.VER5 = true;
if (this.IE4 || this.NS4) this.VER4 = true;
this.OLD = (! this.VER5 && ! this.VER4) ? true : false;
this.min = (this.NS||this.IE);
}
is = new BrowserCheck();
// End -->
</SCRIPT>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<META content="MSHTML 6.00.2716.2200" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff>
<DIV>&nbsp;</DIV>
<DIV style="FONT: 10pt arial">
<DIV>&nbsp;</DIV></DIV>
<DIV><BR></DIV>
<DIV id=staticBall style="VISIBILITY: visible; POSITION: relative"><IMG
height=30 alt="Static ball" src="http://www.ilove.com.br/lili/imagens/bola.gif"
width=30> </DIV>
<CENTER></CENTER>
<DIV id=ball
style="LEFT: 100px; VISIBILITY: hidden; WIDTH: 34px; POSITION: absolute; TOP: 10px; HEIGHT: 34px"><IMG
height=30 alt="Bouncing ball"
src="http://javascript.internet.com/img/ball-drop/ball.gif" width=30> </DIV>
<SCRIPT language=Javascript1.2>
<!-- Begin
iter = 0;
setId = 0;
down = true;
up = false;
bouncingBall = (is.VER5) ? document.getElementById("ball").style
: (is.NS) ? document.layers["ball"]
: document.all["ball"].style;
stillBall = (is.VER5) ? document.getElementById("staticBall").style
: (is.NS) ? document.layers["staticBall"] : document.all["staticBall"].style;
winH = (is.NS) ? window.innerHeight - 55 : document.body.offsetHeight - 55;
document.onmouseup = buttonUp;
if (is.NS4)
document.captureEvents(Event.MOUSEUP);
function buttonUp(e) {
if ( ((is.NS) ? e.which : event.button) != 1) return true;
if (setId != 0) clearInterval(setId);
bouncingBall.visibility="visible";
stillBall.visibility="hidden";
bouncingBall.left = (is.NS) ? e.pageX - 15 : event.offsetX - 15;
bouncingBall.top = (is.NS) ? e.pageY - 15 : event.offsetY - 15;
iter = 0;
setId = setInterval("generateGravity()", 20);
return true;
}
function generateGravity() {
if ((parseInt(bouncingBall.top)+iter < winH) && down) {
bouncingBall.top = parseInt(bouncingBall.top) + iter;
iter++;
return;
}
else {
if ((parseInt(bouncingBall.top)< winH) && down) {
bouncingBall.top = winH + 5;
return;
}
down = false;
up = true;
if (iter < 0 && parseInt(bouncingBall.top) > winH) {
clearInterval(setId);
bouncingBall.visibility = "hidden";
stillBall.visibility="visible";
setId = 0;
}
if (parseInt(bouncingBall.top) > 0 && up && iter >= 0) {
bouncingBall.top = parseInt(bouncingBall.top) - iter;
iter--;
if (iter%3 == 0) iter--;
return;
}
down = true;
up = false;
}
}
// End -->
</SCRIPT>

<DIV>&nbsp;</DIV></BODY></HTML>

----------------------------------------------------------------------------------------------------------------------------------------------------------------


Você pode voltar à aba Editar e formatar uma cor, uma uma imagem e uma música para seu plano de fundo.

Lembre-se de que o efeito só aparece na aba "Visualizar" e quando você clica na bolinha.

Você pode usar uma outra imagem (de preferência que tenha 30px de largura por 29px de altura).

Aqui você encontra a versão prontinha para e-mail dessa tabela. Está zipada no formato .eml (próprio para o Outlook Express)

(Dica enviada gentilmente por Natividade Cruz e formatada por Lilian Russo)

Lilian Russo - Todos os Direitos Reservados - ©2002/2008 - Design by iCre@tions




.