JavaScript - Praxistutorial 1 - Scrollen
1. Die Abschnitte
2. Und jetzt nach links
Als erstes nehmen wir uns nun die Funktion moveLeft vor. Damit bewegen wir die Bildnavigation nach links. Zunächst benötigen
wir zwei Variablen. In der ersten definieren wir die aktuelle Position des "Scroll"-div und in der zweiten die minimal mögliche
Links-Position desselben. Wir wollen ja nicht, dass alles irgendwo im Nirwana landet.
function moveLeft()
{
var leftpos = parseInt(scroll_ele.style.left);
var minpos = (pic_width - 440) * - 1;
}
Erläuterung
Zunächst mal legen wir mit var fest, dass beide Variablen lokal, also nur innerhalb(!) der Funktion verfügbar sind. Damit
vermeiden wir, dass wir aus Versehen in einer anderen Funktion dieselben Namen für etwas völlig Anderes verwenden und uns die Anwendung
um die Ohren fliegt.
leftpos
Mit scroll_ele.style.left holen wir uns die aktuelle Links-Position des div-Elements. Erinnert ihr euch noch?
scroll_ele hatten wir schon in < body onload ... > definiert mit scroll_ele =
document.getElementById('navi');. Aber was soll das parseInt? Nun, ohne das bekämen wir Werte wie 0px
oder -20px. Leider kann man mit denen nicht rechnen, da es sich dabei um Zeichenketten handelt. Also wandeln wir sie mit
parseInt in eine Zahl um. Es gibt auch noch eine andere Variante, aber die stelle ich in einem späteren Tutorial vor.
minpos
Dies ist die minimale Links-Position, die das div haben darf. pic_width hatten wir ja schon
vorher festgelegt als die Gesamtbreite der Bildnavigation. Also ziehen wir 6 Bilder à 70 Pixel plus ein
wenig Sicherheitsabstand davon ab. Das sind ist dann die 440. Und da wir die Navigation nach links verschieben wollen,
benötigen wir negative Werte, daher das * - 1.
Bewegen
function moveLeft()
{
...
if (leftpos >= minpos)
{
scroll_ele.style.left = leftpos - tempo + 'px';
lefti = setTimeout ('moveLeft()', time);
}
}
Erläuterung
Zuerst überprüfen wir, ob die aktuelle Links-Position größer/gleich der festgelegten Minimalposition ist (if (leftpos >=
minpos)). Wenn dem so ist, verschieben wir das Scrollelement um tempo plus der Einheit px nach links.
Den Wert der Variable hatten wir ja schon zu Beginn mit 10 festgelegt.
Die Animation
Zunächst mal fällt dem geübten Auge auf, dass wir die Funktion moveLeft() in selbiger noch mal aufrufen (setTimeout
('moveLeft()', time);). Dabei handelt es sich um eine Art von Rekursion. Also eine Funktion ruft sich selber wieder auf. In diesem Fall bedeutet das einfach gesagt, dass
scroll_ele.style.left = leftpos - tempo + 'px'; erneut ausgeführt wird. Und das geschieht immer und immer wieder, solange
die Bedingung if (leftpos >= minpos) wahr ist.
Kommen wir nun zu der setTimeout-Sache. Um die zu verstehen ersetzt mal spaßeshalber die Zeile durch ein einfaches
moveLeft();. Wenn ihr jetzt mit der Maus auf den linken Pfeil geht, so hüpft die Bilderleiste sofort(!) komplett nach links.
Das liegt daran, dass in so einem Fall erst der komplette Code ausgeführt wird, und man dann danach(!) das Ergebnis zu
Gesicht bekommt.
setTimeout dagegen führt den im ersten Parameter angegebenen Code mit einer Zeitverzögerung aus. Die wird im zweiten Parameter
festgelegt (time), wobei der Wert in Millisekunden gerechnet wird. Interessant ist noch die Variable lefti. Sie
stellt eine Referenz auf die setTimeout-Methode dar. Und die benötigen wir, um die Animation zu beenden.
Stoppen
Das ist in diesem Fall ganz einfach. Wir haben ja die global verfügbare Referenzvariable lefti für die
setTimeout-Methode. Und nun müssen wir nichts anderes tun, als Letztere zu beenden. Das geschieht mit clearTimeout,
wobei der Parameter die Referenz auf setTimeout ist.
function stopLeft()
{
clearTimeout(lefti);
}
3. Und jetzt nach rechts
function moveRight()
{
var leftpos = parseInt(scroll_ele.style.left);
if (leftpos < 0)
{
scroll_ele.style.left = leftpos + tempo + 'px';
righti = setTimeout ('moveRight()', time);
}
}
function stopRight()
{
clearTimeout(righti);
}
Erläuterung
Der Code ist fast identisch mit dem bisherigen. Daher gehe ich nur auf die Unterschiede ein. if (leftpos < 0) besagt ganz
einfach nur, solange sich das div-Element nicht an seiner ursprünglichen Position, also der 0 befindet. Und da wir diesmal
alles nach rechts bewegen wollen, nehmen wir anstelle des Minus ein Plus bei leftpos + tempo + 'px';.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt