Beispielcode für den Anzeigeeffekt zum Schütteln und Vergrößern von JS-Albumbildern

var xm;
varym;
 
/* ==== onmousemove-Ereignis ==== */
Dokument.onmousemove = Funktion(e){
	wenn(Fenster.Ereignis) e=Fenster.Ereignis;
	xm = (Beispiel || e.clientX);
	ym = (ey || e.clientY);
}
 
/* ==== Fenstergröße ändern ==== */
Funktion Größe ändern() {
	wenn(diapo)diapo.resize();
}
onresize = Größe ändern;
 
/* ==== Deckkraft ==== */
setOpacity = Funktion(o, alpha){
	wenn (o.filters) o.filters.alpha.opacity = alpha * 100; sonst o.style.opacity = alpha;
}
 
 
 
/* ===== Skript einkapseln ==== */
diapo = {
	Ö: [],
	Gleichstrom: 0,
	Bild: 0,
	txt: 0,
	N: 0,
	xm: 0,
	ym: 0,
	nx: 0,
	ny: 0,
	nw: 0,
	nh: 0,
	rs: 0,
	rsB: 0,
	zo: 0,
	tx_pos: 0,
	tx_var: 0,
	tx_target: 0,
 
	/// Skriptparameter 
	Attraktion: 2,
	Beschleunigung: .9,
	Dämpfung: .1,
	ZoomÜber: 2,
	ZoomKlick: 6,
	Transparenz: .8,
	Schriftgröße: 18,
	//
 
	/* ==== Diapo-Größe ändern ==== */
	Größe ändern : Funktion(){
		mit(diesem){
			nx = DC.Linksversatz;
			ny = DC.OffsetTop;
			nw = DC.Offsetbreite;
			nh = DC.OffsetHöhe;
			txt.style.fontSize = Math.round(nh / Schriftgröße) + "px";
			wenn (Math.abs (rs-rsB) <100) für (var i = 0; i <N; i++) O[i].resize ();
			rsB = rs;
		}
	},
 
	/* ==== diapo erstellen ==== */
	CDiapo: Funktion (o) {
		/* ==== Initialisierungsvariablen ==== */
		dies.o = o;
		dies.x_pos = dies.y_pos = 0;
		dies.x_origin = dies.y_origin = 0;
		dies.x_var = dies.y_var = 0;
		dies.x_ziel = dies.y_ziel = 0;
		dies.w_pos = dies.h_pos = 0;
		dies.w_origin = dies.h_origin = 0;
		dies.w_var = dies.h_var = 0;
		dies.w_target = dies.h_target = 0;
		dies.over = falsch;
		dies.klicken = falsch;
 
		/* ==== Schatten erzeugen ==== */
		this.spa = document.createElement("span");
		this.spa.className = "spaDC";
		diapo.DC.appendChild(dieses.spa);
 
		/* ==== Miniaturbild erstellen ==== */
		dies.img = document.createElement("img");
		dies.img.className = "imgDC";
		dies.img.src = o.src;
		dies.img.O = dies;
		diapo.DC.appendChild(dieses.img);
		setOpacity(this.img, diapo.transparency);
 
		/* ==== Mausereignisse ==== */
		this.img.onselectstart = neue Funktion("return false;");
		this.img.ondrag = neue Funktion("return false;");
		dies.img.onmouseover = Funktion(){
			diapo.tx_target=0;
			diapo.txt.innerHTML=dies.Ooalt;
			dies.O.over=true;
			setOpacity(dies,dies.O.click?diapo.transparency:1);
		}
		dies.img.onmouseout = Funktion(){
			diapo.tx_target=-diapo.nw;
			dies.O.over=false;
			setOpacity(diese,diapo.transparenz);
		}
		dies.img.onclick = Funktion() {
			wenn(!dies.O.klick){
				wenn(diapo.zo && diapo.zo != dies) diapo.zo.onclick();
				dies.O.click = wahr;
				dies.O.x_origin = (diapo.nw - (dies.O.w_origin * diapo.zoomClick)) / 2;
				this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
				diapo.zo = dies;
				setOpacity(diese,diapo.transparenz);
			} anders {
				dies.O.click = falsch;
				dies.O.over = falsch;
				dies.O.resize();
				diapo.zo = 0;
			}
		}
 
		/* ==== Miniaturansichten basierend auf der Position der „imgsrc“-Bilder neu anordnen ==== */
		dies.resize = Funktion (){
			mit (diesem) {
				x_origin = o.offsetLeft;
				y_origin = o.offsetTop;
				w_origin = o.OffsetBreite;
				h_origin = o.OffsetHeight;
			}
		}
 
		/* ==== Animationsfunktion ==== */
		diese.position = funktion (){
			mit (diesem) {
				/* ==== Zielposition festlegen ==== */
				w_Ziel = w_Ursprung;
				h_Ziel = h_Ursprung;
				wenn(über){
					/* ==== Maus darüber bewegen ==== */
					w_Ziel = w_Ursprung * diapo.zoomOver;
					h_Ziel = h_Ursprung * diapo.zoomOver;
					x_Ziel = diapo.xm – w_pos / 2 – (diapo.xm – (x_Ursprung + w_pos / 2)) / (diapo.Attraktion*(Klick?10:1));
					y_Ziel = diapo.ym – h_pos / 2 – (diapo.ym – (y_Ursprung + h_pos / 2)) / (diapo.Attraktion*(Klick?10:1));
				} anders {
					/* ==== Maus raus ==== */
					x_Ziel = x_Ursprung;
					y_Ziel = y_Ursprung;
				}
				wenn(klicken){
					/* ==== geklickt ==== */
					w_Ziel = w_Ursprung * diapo.zoomClick;
					h_Ziel = h_Ursprung * diapo.zoomClick;
				}
 
				/* ==== magische Federgleichungen ==== */
				x_pos += x_var = x_var * diapo.Beschleunigung + (x_Ziel - x_pos) * diapo.Dämpfung;
				y_pos += y_var = y_var * diapo.Beschleunigung + (y_Ziel - y_pos) * diapo.Dämpfung;
				w_pos += w_var = w_var * (Diagonale.Beschleunigung * .5) + (w_Ziel - w_pos) * (Diagonale.Dämpfung * .5);
				h_pos += h_var = h_var * (Diagonale.Beschleunigung * .5) + (h_Ziel - h_pos) * (Diagonale.Dämpfung * .5);
				diapo.rs += (Math.abs(x_var) + Math.abs(y_var));
 
				/* ==== HTML-Animation ==== */
				mit (Bildstil) {
					links = Math.round(x_pos) + "px";
					oben = Math.round(y_pos) + "px";
					Breite = Math.round(Math.max(0, w_pos)) + "px";
					Höhe = Math.round(Math.max(0, h_pos)) + "px";
					zIndex = Math.round(w_pos);
				}
				mit(spa.style){
					links = Math.round(x_pos + w_pos * .1) + "px";
					oben = Math.round(y_pos + h_pos * .1) + "px";
					Breite = Math.round(Math.max(0, w_pos * 1,1)) + "px";
					Höhe = Math.round(Math.max(0, h_pos * 1,1)) + "px";
					zIndex = Math.round(w_pos);
				}
			}
		}
	},
 
	/* ==== Hauptschleife ==== */
	ausführen: Funktion(){
		diapo.xm = xm – diapo.nx;
		diapo.ym = ym - diapo.ny;
		/* ==== Untertitel-Animation ==== */
		diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
		diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
		/* ==== Bilder anim ==== */
		für (var i in diapo.O) diapo.O[i].position();
		/* ==== Schleife ==== */
		setTimeout("diapo.run();", 16);
	},
 
	/* ==== Bilder laden ==== */
	Bilder laden : Funktion(){
		// ===== Schleife, bis alle Bilder geladen sind =====
		var M = 0;
		für(var i=0; i<diapo.N; i++) {
			wenn(diapo.img[i].complete) {
				diapo.img[i].style.position = "relativ";
				diapo.O[i].img.style.visibility = "sichtbar";
				diapo.O[i].spa.style.visibility = "sichtbar";
				M++;
			}
			Größe ändern();
		}
		wenn(M<diapo.N) setTimeout("diapo.images_load();", 128);
	},
 
	/* ==== Init-Skript ==== */
	init : Funktion() {
		diapo.DC = document.getElementById("diapoContainer");
		diapo.img = diapo.DC.getElementsByTagName("img");
		diapo.txt = document.getElementById("Beschriftung");
		diapo.N = diapo.img.Länge;
		für (i = 0; i < diapo.N; i++) diapo.O.push (neu diapo.CDiapo (diapo.img[i]));
		diapo.resize();
		diapo.tx_pos = -diapo.nw;
		diapo.tx_target = -diapo.nw;
		diapo.images_load();
		diapo.run();
	}
}
 
/* ==== Skript starten ==== */
Funktion dom_onload() {
	wenn(document.getElementById("diapoContainer")) diapo.init(); sonst setTimeout("dom_onload();", 128);
}
dom_onload();