js: "pixelweises" Einfaden

Andi1974 · 15.02.2006

Hallo zusammen, ich hatte heute Langeweile und habe mich an zwei kleinen Sachen probiert, die mir schon sehr lange vorschwebten:
Mit Klick auf ein thumpnail soll das GroßBild zeilenweise reingeschwebt kommen.
Das habe ich nun so umgesetzt:

HTML:

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Einfaden von Bildern nur y-Achse - A.Strusch</title>

	</head>

	<body>
		<h1>ein netter Effekt f&uuml;r thumpnails?</h1>
		<a href="mailto:andreas@strus.ch">&Uuml;ber Feedback und Anregungen w&uuml;rde ich mich sehr freuen! </a>
		<script type="text/javascript">
var path="http://www.google.de/logos/olympics06_luge_res.gif";//bei offline: hier anpassen!
var newContainer=[];
var abstand, a, b, c =0;
var hoehe=65; //sollte man dann nach einem js-reloader aus dem tatsächlichen Bild ziehen

var StartPosition = 100; //hier fangen wir damit an
//nun schreiben wir neue DIV´s. jeweils eine Zeile mit dem entsprechenden Teil der Grafik als Hintergrund  
for (var i=0; i<hoehe; i++) {
	abstand=StartPosition+i*200;//einfach, damit es weiter weg ist...
	document.write('<DIV id="showItDIV'+i+'" style="width:150px;position:absolute;top:'+abstand+'px;left:35%;height:1px;background-color:transparent;background-image:url('+path+');background-position:0 '+(hoehe-i)+'px;"></DIV>');
	newContainer[i]=document.getElementById("showItDIV"+i);// im array merken, wie man "die neuen" anspricht 
						}
						
//jetzt gehts lo-hos (gröhl...)
function showIt(){
	for (var i=0; i<hoehe; i++) //so oft eben, wie´s hoch ist
		if ((a=parseInt(newContainer[i].style.top)) > (b=i+StartPosition))//wenn der Abstand noch gösser ist, als gewollt...
		newContainer[i].style.top= a-Math.abs((a-b)/(2/Math.sin(c)))+"px";//ziehen wir von der aktuellen Position etwas ab
					//und zwar die aufs ganze gerundete Differenz teilen wir durch den halbierten Sinus von C
					// wobei C immer mitläuft - solange die Funktion eben benötigt.  
				c++;
				}

				setInterval(showIt, 10);
</script>
	</body>
</html>

im zweiten Bsb nun "pixel-(Blöcke)weise":

HTML:

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>'pixelweises' Einfaden von Bildern A.Strusch</title>
		<style type="text/css" media="screen"><!--
div   { background-color: transparent; background-image: url("http://193.151.7.170/albums/Felsberg/acs.jpg"); position: absolute }
body { background-color: #d4e8f4 }
--></style>
	</head>

	<body>
			<h1>ein netter Effekt f&uuml;r eine BilderGalerie?!</h1>
	<a href="mailto:andreas@strus.ch">&Uuml;ber Feedback und Anregungen w&uuml;rde ich mich sehr freuen! </a>

		<script type="text/javascript">
			var newContainer = [] ;
			var allCount =0;
			var hoehe=480;
			var breite=640;
			var endX = 100;
			var endY = 100; 
			var clusterX = 20;
			var clusterY = 20;
			var i = 0;
			var j = 0;
			var b = 0;
			var c = 0;
			var d = 0;
			var a = 0;
			var fertig =0;
		do {
			do {
				abstandY=Math.abs(endY+i+(Math.random()*i*30));
				abstandX=Math.abs(endX+j+(Math.random()*j*20));
				document.write('<DIV id="showItDIV'+((i*breite)+j)+'" style="width:'+clusterX+'px;height:'+clusterY+'px;top:'+abstandY+'px;left:'+abstandX+'px;background-position:'+(breite-j)+' '+(hoehe-i)+'px;"></DIV>');
				newContainer[((i*breite)+j)]=document.getElementById("showItDIV"+((i*breite)+j)); 
				j=j+clusterX;
			} while (j<breite);
			i=i+clusterY;
			j=0;			
		} while (i<hoehe);

function showIt(){
					var i=0;
					var j=0;
					do {
						c++;
						do {
							if ((a=parseInt(newContainer[((i*breite)+j)].style.top)) > (b=i+endY))
								newContainer[((i*breite)+j)].style.top=a-Math.abs((a-b)/(2/Math.sin(c)))+"px";
							if ((d=parseInt(newContainer[((i*breite)+j)].style.left)) > (e=j+endX))
								newContainer[((i*breite)+j)].style.left=d-Math.abs((d-e)/(2/Math.sin(c)))+"px";
								j=j+clusterX;
						} while(j<breite);
						i=i+clusterY;
						j=0;
					} while (i<hoehe);
					//if (fertig=(breite/clusterX)*(hoehe/clusterY))
					//	clearInterval();//noch einbauen - fertig hochzählen, wenn eine if-Bedingung nicht mehr erfüllt wird 
					}
	setInterval(showIt, 10);
</script>
	</body>
</html>

Ein echter js-Profi wird wohl die Hände über dem Kopf zusammenschlagen, denke ich - und deswgene poste ich das hier ja auch =P
Der Effeklt hau hin, ist im Safari auch vertretbar, im 1.5´er FF allerdings schon arg langsam.
Wer kann mir Optimierungstipps geben?
Vielen Dank!!!
Beste Grüße
Andreas

js: "pixelweises" Einfaden

Andi1974

Neues Mitglied