flytMed()-funktion og animering

På foregående side udviklede jeg en universalfunktion for flytning af et vilkårligt html-element fra én position på websiden til en anden position. Ofte har vi imidlertid brug for at flytte et element et lille stykke, alt så flytte elementet med et antal pixel i stedet for at flytte det til et bestemt sted.

En sådan funktion antager formen:

- eller, for ikke at stikke noget under stolen - i sin grundlæggende form:

function flytMed(objekt, dx, dy){
var blok = findObjekt(objekt);
  if (dom) {
    blok.left = parseInt(blok.left) + dx;
    blok.top = parseInt(blok.top) + dy;
  }
  else 
  if (ie4) {
    blok.pixelLeft += dx;
    blok.pixelTop  += dy;
  } 
  else
    if (ns4) {
    blok.moveBy(dx, dy);
  } 
}

Flyt kasse med 10 pixel opad og til højre

Hvad der ikke umiddelbart er indlysende er, at jeg her, for at få det til at virke, er nødt til at give #bluebox en inline style:

<div id="bluebox" style="position:relative;
margin:10px 10px 10px 0;">
<p>Blå<br>
kasse</p>
</div>

(Årsagen til, at det her er nødvendigt er (endnu) en særhed ved Internet Explorer: Hvis et elements style defineres ved hjælp af <style>-markøren, tillader Internet Explorer ikke, at du aflæser startværdierne, altså de egenskaber, du fastsætter i dit stylesheet. Det gælder alle CSS-egenskaber. Når du først via JavaScript har ændret på egenskaberne, har browseren ingen problemer med at aflæse værdierne.)

Sliding (glidning)

Når du klikker gentagne gange på linket ovenfor, vil du opdage, at du for hvert klik rykker den blå kasse 10 px opad og til højre. Fra denne iagttagelse og til at lave en animering af kassen er der kun et lille skridt:

function slideBox(){
  var count = findX('redbox')
  if (count < 250) {
  flytMed('redbox', 5, -5);

  setTimeout('slideBox()',30)
  }
}

Glid rød kasse opad til højre indtil den er 250 pixel fra venstre kant.

Universalfunktion til glidning

Det netop gennemgåede eksempel er jo ikke helt i tråd med min ambition om at lave en universalfunktion til dette. Denne skulle helst være på formen:

glidObjekt(objekt,nyX,nyY,v,s)

Her repræsenterer objekt som sædvanlig det HTML-element, vi ønsker at manipulere med, nyX og nyY repræsenterer x- og y-koodinaten for det sted, hvor elementet skal ende efter glidningen, v repræsenterer den hastighed, hvormed glidningen skal foregå, og s repræsenterer det antal pixel, elementet skal bevæge sig ad gangen. v er er tal, der angiver antallet af millisekunder mellem hvert spring, det vil sige, des mindre, jo hurtigere går det. s er et tal, der angiver hvor mange pixel, elementet skal bevæge sig per gang, det vil sige, des større tal, des hurtigere går det (men også mere hakkende). s skal gå et helt antal gange op i både nyX og nyY, slutkoordinaterne.

Glid grøn kasse til 500 pixel fra venstre kant
Glid grøn kasse retur

Kildekoden

At lave en slide-funktion er ikke bare at gentage flytMed()-funktionen, for udgangspunktet ændrer sig jo hele tiden. Derfor bruger jeg flytTil()-funktionen, flytter et lille stykke, finder ud af, hvor elementet nu befinder sig, og flytter igen et lille stykke. Det bli'r en smule kompliceret, men i tekstboksen herunder kan du se hele kildekoden til slide-funktionen.

Oprettet: 24. juni 2002
Senest opdateret: 21. maj 2003