Quando si utilizzano JavaScript nella vostra pagina web, siete in grado di aumentare la quantità di elementi in movimento sulla pagina. Mentre è possibile utilizzare JavaScript per elementi ad esempio web form, sondaggi, sondaggi e giochi, si può anche utilizzare per creare elementi di design. Ad esempio, si possono fare cose come aggiungere un'animazione a una farfalla.

Istruzioni

1

Accedere al server web e fare clic sul documento HTML in cui si desidera inserire una farfalla animata.

2

Fare clic all'interno del tag "< body >" e inserire questo codice:

var Ymax = 8; NUMERO MASSIMO DI PASSAGGI DI PIXEL NELLA DIREZIONE "X"

var Xmax = 8; NUMERO MASSIMO DI PASSAGGI DI PIXEL IN DIREZIONE "Y"

var Tmax = 10000; N # MAX DI MILLISECONDI TRA MODIFICHE DEI PARAMETRI

var floatimages = new Array ();

floatimages [0] = 'l'http://www.webworkcreations.com/javascripts/scripts/butterflies/pageimages/butterfly001.gif'

var NS4 = (navigator.appName.indexOf("Netscape") > = 0 & & parseFloat(navigator.appVersion) > = 4 & & parseFloat(navigator.appVersion) < 5)? true: false;

var IE4 = (Document. All)? true: false;

var NS6 = (parseFloat(navigator.appVersion) > = 5 & & navigator.appName.indexOf("Netscape") > = 0)? true: false;

var wind_w, wind_h, t = cm, ID = new Array ();

per (i = 0; i < floatimages.length; i + +) {

t + = (NS4)?' < nome layer = "pic '+ i +'" visibilità = "Nascondi" larghezza = "10" altezza = "10" >< un href="javascript:hidebutterfly()" >': ' < div id = "pic '+ i +'" style = "Posizione: absolute; visibilità: nascosto; Larghezza: 10px; Altezza: 10px">< un href="javascript:hidebutterfly() ">';

t + = ' < img nome = "p"+ i +"" border = "0" >';

t + = (NS4)? ' < /a >< / layer >': ' < /a >< / div >';

}

Document.Write(t);

Function moveimage(num) () {

Se (getidleft (num) + IDs [num]. W + ID [num]. Xstep > = wind_w+getscrollx()) ID [num]. Xdir = false;

Se (getidleft (num)-ID [num]. Xstep < =getscrollx()) ID [num]. Xdir = true;

Se (getidtop (num) + IDs [num]. H + ID [num]. Ystep > = wind_h+getscrolly()) ID [num]. Ydir = false;

Se (getidtop (num)-ID [num]. Ystep < =getscrolly()) ID [num]. Ydir = true;

moveidby (num, (IDs [num]. Xdir)? ID [num]. Xstep:-ID [num]. Xstep, (IDs [num]. Ydir)? ID [num]. Ystep:-ID [num]. Ystep);

}

Function getnewprops(num) () {

ID [num]. Ydir=Math.Floor(Math.Random()*2) > 0;

ID [num]. Xdir=Math.Floor(Math.Random()*2) > 0;

ID [num]. Ystep=Math.ceil(Math.Random()*ymax);

ID [num]. Xstep=Math.ceil(Math.Random()*Xmax)

setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));

}

Function getscrollx() () {

if(NS4 || Window.pageXOffset ritorno NS6);

Se document.body.scrollLeft di ritorno (IE4);

}

Function getscrolly() () {

if(NS4 || Window.pageYOffset ritorno NS6);

Se document.body.scrollTop di ritorno (IE4);

}

Function getid(name) () {

Se document.layers[name ritorno (NS4)];

Se document.all[name ritorno (IE4)];

Se document.getElementById(name) di ritorno (NS6);

}

Function moveidto(num,x,y) () {

if(NS4)IDS[num].MoveTo(x,y);

if(ie4 || NS6) {

ID [num].style.left = x + 'px';

ID [num].style.top = y + 'px';

}}

Function getidleft(num) () {

Se (NS4) ritorno ID [num] tilmato;

if(ie4 || ParseInt(IDs[num].style.left) ritorno NS6);

}

Function getidtop(num) () {

Se (NS4) ritorno ID [num]. Top;

if(ie4 || ParseInt(IDs[num].style.top) ritorno NS6);

}

Function moveidby(num,dx,dy) () {

Se gli ID (NS4) [num] .moveBy (dx, dy);

if(ie4 || NS6) {

ID [num].style.left = (getidleft (num) + dx) + 'px';

ID [num].style.top = (getidtop (num) + dy) + 'px';

}}

Function getwindowwidth() () {

if(NS4 || Window.innerWidth ritorno NS6);

Se document.body.clientWidth ritorno (IE4);

}

Function getwindowheight() () {

if(NS4 || Window.innerHeight ritorno NS6);

Se Document.Body.clientWidth ritorno (IE4);

}

Function init () {

wind_w=getwindowwidth();

wind_h=getwindowheight();

per (i = 0; i < floatimages.length; i + +) {

IDs[i]=getid('pic'+i);

if(NS4) () {

ID [i]. W = ID [i].document.images ["p" + i] + width;

ID [i]. H = ID [i] .height.document.images ["p" + i];

}

if(NS6 || IE4) {

ID [i]. W=Document.images["p"+i].Width;

ID [i]. H=Document.images["p"+i].Height;

}

getnewprops(i);

moveidto (i, Math.floor(Math.random()(wind_w-IDs [i]. W)), Math.floor(Math.random()(wind_h-IDs [i]. H)));

Se visibilità IDs (NS4) [i] = "Visualizza";

if(ie4 || NS6).style.visibility ID [i] = "visibile";

startfly=setInterval('moveimage('+i+')',Math.Floor(Math.Random()*100)+100);

}}

Function hidebutterfly() () {

per (i = 0; i < floatimages.length; i + +) {

Se (IE4)

EVAL("Document.all.pic"+i+".Style.Visibility='hidden'")

ElseIf (NS6)

document.getElementById("pic"+i).style.visibility = 'hidden'

ElseIf (NS4)

EVAL("Document.pic"+i+".Visibility='hide'")

clearInterval(startfly)

}

}

Se (NS4|| NS6|| IE4) {

Window.OnLoad=init;

Window.OnResize=function() {wind_w=getwindowwidth(); wind_h=getwindowheight();}

}

< / script >

3

Pubblicare la pagina. La farfalla animata ora vi svolazzano attraverso la pagina pubblicata.