Javascript ist Toll!

29. September 2008 - 13:46

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 Parameter center, 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).
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

js/clip.js
 

Beispiel

In dem Formular können die Parameter für den open() Aufruf geändert werden.

Element ID:   
Volle Breite:  
Volle Höhe:   
Center:       
Step:         


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. June 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)
500 mal gelesen.

Ein Kommentar

Leave a comment »

Seiten:

1. Pingback von: Tweening – Effekte mit Javascript [Javascript ist Toll!]
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 […]

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful