aufgleitende Javascript Popups
Das folgende Skript öffnet ein HTML Element mit einer fliessenden Bewegung. Es gleitet auf, anstatt sofort sichtbar zu sein. Dies wird durch die CSS Eigenschaft clip() erreicht. Diese Technik funktioniert nur, wenn das Element absolut positioniert ist
Beschreibung
- ClipObjekt(param)
- Gibt ein ClipObjekt Popup zurück, der Parameter kann entweder ein String mit der ID des Elementes sein (es findet keine Überprüfung statt) oder das Objekt selbst.
- ClipObjekt().open(fix_h, fix_w, step, center, speed)
- öffnet das Popupfenster. Die Parameter haben folgende Bedeutung:
- fix_h (bool)
Das Fenster gleitet nur horizontal auf. Also entweder von Links nach rechts oder mit dem Parametercenter
, von der Mitte nach links und rechts. - fix_w(bool)
Analog wie fix_h nur, dass das Fenster dann vertikal aufgleitet. - step (int)
Anzahl der Pixel pro Schritt (default: 4) - center (bool)
Ist der Parameter wahr gleitet das Fenster aus der Mitte auf. - speed (int)
Millisekunden des Interval (default: 10).
- fix_h (bool)
- ClipObjekt().isOpen()
- Gibt zurück ob das Fenster offen ist oder nicht.
- ClipObjekt().show()
- zeigt das Fenster in seiner vollen Größe an.
- ClipObjekt().hide()
- Versteckt das Fenster.
Es werden zwei Events gefeuert- onopen
wenn das fenster komplett offen ist und onclose
wenn die close() Funktion aufgerufen wird.
Download und Code
Beispiel
In dem Formular können die Parameter für den open() Aufruf geändert werden.
dieser Bereich kann mit einem klick geöffnet werden:
onclick="ClipObject(this).open(0, 0, 4, 1);
ID: test1
dieser Bereich kann auch mit einem klick geöffnet werden:
ID: test2
Text
ähnliche Artikel
- 22. Juni 2012 -- Tween(2) (0)
Die Technik um mit Javascript eine Bewegung zu animieren...
- 18. November 2011 -- LED Editor (1)
LED Scroller Chareditor Dieses Skript dient zum...
- 3. September 2010 -- Tweening – Effekte mit Javascript (4)
Tweening und Transition sind zwei Begriffe aus der...
Comments (1)
5238 mal gelesen.
5238 mal gelesen.
Ein Kommentar
Leave a comment »
Seiten:
3. September 2010: 13:27
[…] der Techniken ist relativ schnell erklärt. Bei einer normalen Animation, wie sie z.b. auch mein aufgleitendes Popup benutzt, ist die Veränderung des Wertes (hier die Höhe und Breite) linear zur Zeit. In jedem […]
Das Neuste
Kategorien
am meisten gelesen
zuletzt kommentiert
Archiv
Wortwolke
google Wordpress prototype LED Scroller Datenschutz LED Bugs linux Tool String OOP Animation Browser Firefox Javascript Drag&Drop Privatsphäre überwachung Laufschrift about:config