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
javascript: js/clip.js
/** |
Datei: clip.js |
Datum: 21:05 28.09.2008 |
Autor: Struppi |
Email: struebig@gmx.net |
ClipObjekt |
Version 1.0 |
Datum: 13:34 29.09.2008 |
Browsertests: |
IE 6 |
FF 2.0.0 |
OP 9.27, 8.01 |
MZ 1.75 |
Safari 3.1.2 |
*/ |
function ClipObject() { |
var p = arguments[0]; |
var o = typeof p == 'object' ? p : |
document.getElementById(p); |
if(!o.id) o.id = 'clipobject#' + ClipObject.nr++; |
if(ClipObject._c[o.id]) return ClipObject._c[o.id]; |
function _ClipObject(o){ |
var obj = o; |
var open = true; |
var self = this; |
// Events |
this.onopen = this.onclose = function() {}; // Dummy |
this.isOpen = function() { return open; }; |
this.show = function() { |
obj.style.position = 'absolute'; |
obj.style.display = 'block'; |
obj.style.clip = 'rect(auto, auto, auto, auto)'; |
}; |
this.hide = function() { |
obj.style.display = 'none'; |
}; |
this.close = function() { |
obj.style.clip = 'rect(0, 0, 0, 0)'; |
open = false; |
this.onclose(); |
}; |
this.open = function(fix_h, fix_w, st, center, sp) { |
// Die Maße ermitteln |
this.show(); |
var width = obj.offsetWidth + 1; |
var height = obj.offsetHeight + 1; |
obj.style.clip = 'rect(0, 0, 0, 0)'; |
// Parameter |
var step = st ? st : 4; |
var speed = sp ? sp : 10; |
var isCenter = center ? 0.5 : 0; |
var t = fix_h ? 0 : height * isCenter; |
var h = fix_h ? height : height * isCenter; |
var l = fix_w ? 0 : width * isCenter; |
var w = fix_w ? width : width * isCenter; |
var ratio = width / height; |
var step_w = step * (center ? 0.5 : 1) * (ratio > 1 ? 1 : ratio); |
var step_h = step * (center ? 0.5 : 1) * (ratio < 1 ? 1 : 1 / ratio); |
var clip_array = []; |
while(!(t <= 0 && w >= width && l <= 0 && h >= height)) { |
if(!fix_w)w += step_w; |
if(!fix_h)h += step_h; |
if(isCenter) { |
l -= step_w; |
t -= step_h; |
} |
if(t < 0 ) t = 0; |
if(l < 0 ) l = 0; |
/* |
Math.floor ist notwendig, |
da FF bei zu langen Kommazahlen eine Warnung erzeugt. |
*/ |
clip_array.push( 'rect(' |
+ Math.floor(t) + 'px, ' |
+ Math.floor(w) + 'px, ' |
+ Math.floor(h) + 'px, ' |
+ Math.floor(l) + 'px)'); |
} |
// Start |
var interval_func = function() { |
if(!clip_array.length) { |
window.clearInterval(interval); |
open = true; |
self.onopen(); |
return; |
} |
obj.style.clip = clip_array.shift(); |
}; |
var interval = window.setInterval(interval_func, speed); |
}; |
} |
var _this = new _ClipObject(o); |
ClipObject._c[o.id] = _this; |
return _this; |
} |
ClipObject._c = {}; // Container |
ClipObject.nr = 0; |
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
Comments (1)
2647 mal gelesen.
2647 mal gelesen.
1 Kommentar Einen Kommentar hinterlassen »
Pingbacks
Tweening – Effekte mit Javascript [Javascript ist Toll!]
[...] 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 [...]
Kommentare
Einen Kommentar hinterlassen