JS - Groeiend plaatje uitleg

gast0187 · 7 jun 2015

Hallo beste leden,

zou me iemand kunnen vertellen wat dit scriptje precies doet?
Zodat ik weet wat deze code precies doet.
vooral die total en steps zijn me onduidelijk.

HTML:

<body onload="zoomImg('logo', 5, 120, 250, 350)">

Logo is de id van image, en die 250 en 350 is width en height (max grootte van image)

Code:

var ival, imgname, total, steps, maxx, maxy, currentx, currenty, dx, dy;
function zoomImg(imgname, total, steps, maxx, maxy)	{
    total = total * 1000;
    objref = eval("document.getElementById('"+imgname+"')");
    currentx = objref.width;
    currenty = objref.height;
    stepx = maxx / steps;
    stepy = maxy / steps;
    inttime = total / steps;
    functionRef = "resizeImg('"+imgname+"', "+stepx+", "+stepy+", "+maxx+", "+maxy+")";
    ival = setInterval(functionRef, inttime);
}
function resizeImg(imgname, dx, dy, maxx, maxy) {
    objref = eval("document.getElementById('"+imgname+"')");
    currentx = objref.width;
    currenty = objref.height;
    if ((currentx<maxx-dx) && (currenty<maxy-dy)) {
        objref.height = currenty + dy;
        objref.width = currentx + dx;
    }
    else {
        clearInterval(ival);
        objref.height = maxy;
        objref.width = maxx;
    }
}

Bron: http://www.leejoo.nl/java/imageeffects/image_groei/groeiend_plaatje.htm

Alvast op voorhand bedankt.
Mvg gast0187

mysql · 30 jun 2015

Hallo gast0187,

dit scriptje lijkt mij handiger:

HTML:

<img id="image" src="http://www.leejoo.nl/java/imageeffects/image_groei/skyline.jpg" style="height:0px;">


<script>
function image_zoom(id,time,from,to){

	var img = document.getElementById(id); //Verkrijg plaatje

	var ani = img.animate([{height:from+'px'},{height:to+'px'}],{duration:time}); //Stel animatie in

	ani.onfinish = function(){ //Wat te doen als animatie klaar is

		ani.cancel(); //Animatie stoppen

		img.style.height = to+'px'; //Breedte instellen (anders gaat die terug naar 'default')

	}

}
<script>

Het werkt hetzelfde.

Je hoeft nu alleen nog image_zoom(id,time,from,to); aan te roepen.

MySQL

JS - Groeiend plaatje uitleg

gast0187

Gebruiker

mysql

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy