 Objekt scroll
Images (und / oder auch Text) werden auf einer eigenen Ebene über den Bildschirm gescrollt! Geeignet für beide Browser. Nicht getestet in NS6
|
|
Elemente bewegen mit DHTML
Links zum Quelltext und Beispiel im Kopfbereich.
Im Body wird mit dem DIV-Tag ein Bereich deklariert. Zwischen diesen DIV-Tags stehen die zu scrollenden Objekte (Grafiken + Text).
<div id="BewegtesElement">
Objekte
</div>
Hier im Beispiel ein DIV-Bereich (BewegtesElement) mit einer Tabelle die alle Objekte enthält.
Aufwand:
- CSS-Anweisungen in den Head-Bereich kopieren
- DIV-Bereich für Objekte in den Body-Bereich kopieren
- Script in den Body-Bereich kopieren
CSS-Anweisungen
Breite und Textformatierung sollten Sie anpassen.
<style type="text/css">
<!--
#BewegtesElement {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:normal;
color: #3F3F3F;
width:400px;
position:absolute;
visibility:visible;
}
-->
</style>
Zur Anpassung folgende Änderungen im Script möglich:
| Element |
Aufgabe |
hier im Beispiel |
ersetzen mit |
| var xPos = 20; |
X-Position |
20 |
Wert in Pixel |
| var yPos = 0; |
Y-Position |
0 |
Wert in Pixel |
| var step = 1; |
Schritte |
1 |
Zahl |
| var delay = 30; |
Verzögerung |
30 |
Wert in ms |
|
Hier im Beispiel lediglich ein DIV-Bereich (BewegtesElement) mit einer Tabelle die alle Objekte enthält.
Im 2. Beispiel zwei DIV-Bereiche (inhalt1 & inhalt2) .
Für diese Bereiche werden auch 2 verschiedene X-Positionen definiert: xPosLeft , xPosRight.
var xPosLeft = 20;
var xPosRight = 800;
verwendete Images (in der Zip-Datei bereits enthalten):
  
|
Home • DHTML • Elemente bewegen
BEISPIEL
DOWNLOAD
