JavaScript – Narastajuća slika

Krstarica 24. april 2001. 00:00

Evo jednog vrlo zanimljivog skripta, koji spada u domen DHTML-a. Radi se o JavaScript-u koji u određenom vremenskom intervalu vrši promenu, tj. uvećanje neke slike, dimanički. U našem primeru, uvećanje će se vršiti odmah po učitavanju stranice, na događaj „OnLoad“, a može se podesiti da se promena izvrši i kasnije. Uvećanje se vrši prema zadatim parametrima, pri pozivanju funkcije. Povećanje se vrši u određenom broju koraka, koje možemo odrediti, i u određenom vremenskom intervalu koji je takođe kontrolisan. Programski kod je vrlo jednostavan i možete ga ispratiti, uz dodatne pomoćne komentare. Iskopirajte sledeći kod u novi fajl i dajte mu ekstenziju „.htm“:



<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!–

var ival, nazSlike, ukupno, korak, maxx,

    maxy, trenutnox, trenutnoy, dx, dy;
function uvecaj(nazSlike, ukupno, korak, maxx, maxy) {

// konvertuje uk.sekunde u milisekundå

ukupno = ukupno * 1000;

objref = eval("document.getElementById(‘"+nazSlike+"’)");

trenutnox = objref.width;

trenutnoy = objref.height;
// racunanje koliko ce biti povecanje po svakom koraku

// deljenje dimenzija slike sa brojem koraka,

// radi dobijanja velicine promene po svakom koraku
korakx = maxx / korak;

koraky = maxy / korak;
// podela uk. vremena (u ms) sa brojem koraka,

// radi dobijanja intervala

interval = ukupno / korak;
// podesavanje intervala za promenu velicine slike,

// za odredjeni broj piksela

functionRef = "promenaVel(‘"+nazSlike+"’, "+korakx+",

"+koraky+", "+maxx+", "+maxy+")";

intervalK = setInterval(functionRef, interval);

}
function promenaVel(nazSlike, dx, dy, maxx, maxy) {

objref = eval("document.getElementById(‘"+nazSlike+"’)");

trenutnox = objref.width;

trenutnoy = objref.height;

if ((trenutnox<maxx-dx) && (trenutnoy<maxy-dy)) {

objref.height = trenutnoy + dy;

objref.width = trenutnox + dx;

}

else {

clearInterval(intervalK);

objref.height = maxy;

objref.width = maxx;

}

}

//–>

</SCRIPT>
</HEAD>

<BODY onLoad="uvecaj(‘test’, 10, 150, 300, 200)">
<center><img src="slika.gif"

name="test" id="test"

height="2" width="3">

Kada snimite ovaj kod u .htm fajl, i otvorite ga u browser-u, videćete efekat sličan ovom na slici, uvećanje koje nije postignuto animiranim gif-om, već JavaScript-om.

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.

programiranje