Come far rimbalzare una palla in JavaScript

October 18

Ci sono un paio di metodi che si possono utilizzare per inserire una palla che rimbalza nella pagina Web. Un metodo richiede di avere accesso al software Adobe Flash. L'altro metodo - che usa JavaScript - non richiede di acquistare alcun software speciale. Tuttavia, si dovrebbe avere una conoscenza generale codifica HTML e una solida conoscenza di JavaScript per far rimbalzare una palla con il codice JavaScript.

istruzione

1 Accedere al server Web e fare clic sulla pagina HTML in cui si desidera inserire il codice JavaScript che creerà una palla che rimbalza.

2 Scorri fino alla sezione <head> del documento HTML. Inserire il seguente codice all'interno di questa sezione della pagina:

<SCRIPT LANGUAGE = "JavaScript1.2">

<! - Begin

funzione BrowserCheck () {

var b = navigator.appName;

if (b == "Netscape") this.b = "NS";

else if (b == "Microsoft Internet Explorer") this.b = "IE";

altro 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)? vero falso;

this.min = (this.NS || this.IE);

}

è = new BrowserCheck ();

// End ->

</ Script>

3 Scorrere verso il basso fino alla sezione <body> della tua pagina. Inserire questo codice tra i tag <body> e </ body> tag:

<Center>

Fare clic in qualsiasi per avviare lo script

<Div id = "staticBall" style = "position: relative; visibilità: visibile">

<Img altezza = 30 width = 30 alt = "palla Static">

</ Div>

</ Center>

<Div id = stile "palla" = "visibility: hidden; position: absolute; sinistra: 100; top: 10; altezza: 34; larghezza: 34">

<Img altezza = 30 width = 30 alt = "Bouncing palla">

</ Div>

4 Sostituire "http://www.rewritables.net/ball.gif" con l'URL dell'immagine di un'altra palla, se si desidera utilizzare un altro tipo di palla. La palla in questo codice è blu. Mantenere il codice intatto se si desidera utilizzare la palla blu.

5 Inserire il seguente codice appena sotto il codice inserito nel passaggio 3:

<Script language = "JavaScript1.2">

<! - Begin

iter = 0;

setId = 0;

giù = true;

up = false;

bouncingBall = (is.VER5)? document.getElementById ( "palla"). style

: (is.NS)? document.layers [ "palla"]

: Document.all [ "palla"] stile;.

stillBall = (is.VER5)? document.getElementById ( "staticBall"). style

: (is.NS)? document.layers [ "staticBall"]:. document.all [ "staticBall"] stile;

winh = (is.NS)? window.innerHeight - 55: document.body.offsetHeight - 55;

document.onmouseup = ButtonUp;

if (is.NS4)

document.captureEvents (Event.MOUSEUP);

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

}

Funzione generateGravity () {

if ((parseInt (bouncingBall.top) + iter <winh) && down) {

bouncingBall.top = parseInt (bouncingBall.top) + iter;

iter ++;

ritorno;

}

altro {

if ((parseInt (bouncingBall.top) <winh) && down) {

bouncingBall.top = winh + 5;

ritorno;

}

giù = 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 && fino && iter> = 0) {

bouncingBall.top = parseInt (bouncingBall.top) - iter;

iter--;

if (% iter 3 == 0) iter--;

ritorno;

}

giù = true;

up = false;

}

}

// End ->

</ Script>

6 Pubblicare la pagina.