js: "pixelweises" Einfaden

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Andi1974, 15.02.2006.

  1. Andi1974

    Andi1974 Thread Starter MacUser Mitglied

    Beiträge:
    5
    Zustimmungen:
    0
    MacUser seit:
    07.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