Fenster auf und ab scrollen mit Buttons
sara
- javascript
Auf der Seite www.shakira.com (deutsche Seite wählen)hat's so einen genialen Scroll-Effekt. bei zwei Buttons (1x up , 1x down) ist ein Javascript eingebaut, so dass beim Berühren mit der Maus die Seite nach oben oder unten scrollt. So könnte man Scrollbars vermeiden... habe aber im Quelltext nicht so richtig begriffen, wie das funktioniert. Kann mir jemand helfen?
Wie detailiert hättest Du es denn gerne?
Im Wesentlichen ist es so:
die Eventhandler onmouseover und onmouseout lösen das Ereignis aus, dann wird scroll/noscroll aufgerufen, also anfangen bzw. aufhören mit scrollen.
Von scroll wird die goDown oder, goUp aufgerufen.
Die rechnen die neuen Koordinaten aus und rufen moveIt auf, wo das Scrolling realisiert wird. Dabei wird ein div - Objekt innerhalb eines zweiten div - Objektes verschoben, so daß nur der Bereich des äußeren div-Objektes zu sehen ist.
Die Schwierigkeit ist nur die, daß das onmouseover-Event nur einemal ausgelöst wird, wenn der Mauszeiger auf den Pfeil draufkommt. Bleibt die Maus dann liegen oder wird innerhalb des Pfeiles bewegt, passiert nichts weiter.
Damit es aber nun so schön weiterscrollt wird nun nach dem Scrollen ein Timer eingerichtet. Nach Ablauf der dort eingestellten Zeit wird die Methode erneut aufgerufen, usw. Damit man weiß, wann das aufhören soll, wird einfach in den Methoden scroll/noscroll die Variable loop auf wahr oder falsch gesetzt.
Die ganze Sache sieht vielleicht etwas verwirrend aus, weil man versucht hat, das Ganze objektorientiert zu schreiben. Das objektorientierte kann man auch weglassen und die benötigten Variablen global definieren. Bei diesem Umfang finde ich das in Javascript besser.
Noch Fragen?