Java & JavaScript
|
Home Applets Scripts Navigation:
· Kontextmenü· Linkwechsler Dialogboxen:
· Alert· Alert 2 · Confirm · Prompt Animation:
· Kreis· Kreis 2 · Kreis 3 · Drei Kreise · Spirale · Planetarium · Globus Grafik-Effekte:
· Clipping· Clipping 2 · Clipping 3 · Alpha-Clipping · Fading · Wellenmuster · Wellenmuster 2 Bildschirmschoner:
· Proto· Marquee · Donut · Worm · Mondrian · Pacman Datum & Uhrzeit:
· Countdown· Countup · Wochentag · Last Modified Fraktale:
· Apfelmännchen· Apfelmännchen 2 · Juliamenge · Juliamenge 2 · C-Wert-Generator Mathematik:
· Primzahlen· Primzahlen 2 Verschiedenes:
· Dynamic Popup· TextArea Counter · Warteschleife · Mausschreiber Gäste Kontakt
|
|
- JavaScript : Grafik-Effekte : Clipping 2 -
Werden die Bewegungen des Ausschnitts auf dem Bild durch eine entgegengesetzte Bildbewegung ausgeglichen, entsteht die Illusion eines bewegten Bildes im Bildausschnitt. Erfolgreich getestet mit Internet Explorer 5.5 und 6.0, Netscape Navigator 6.01, 6.1, 6.22, 7.0 und 7.1, sowie Mozilla 1.0, 1.21 und 1.4.
<html>
<head>
<title>Clipping 2</title>
<script language="JavaScript">
var imgWidth=445, imgHeight=342; // Bild-Maße
var xAbs=10, yAbs=10; // absolute Position des Bildes zu Beginn
var x=0, y=0; // relative Position des Ausschnitts zu Beginn
var clipWidth=180, clipHeight=110; // Ausschnitts-Maße
var restWidth=imgWidth-clipWidth, restHeight=imgHeight-clipHeight; // Hilfsgrößen
// Während der Ausschnitt über das Bild wandert,
// bewegt sich das Bild genau in die entgegengesetzte Richtung.
// Dies erzeugt die Illusion der Bewegung des Bildausschnitts.
function move() {
document.getElementById("image").style.clip=
"rect("+y+" "+(x+clipWidth)+" "+(y+clipHeight)+" "+x+")";
// neuer Ausschnitt: rect(oben rechts unten links)
document.getElementById("image").style.left=xAbs;
document.getElementById("image").style.top=yAbs;
}
// Der Ausschnitt startet oben-links und bewegt sich immer diagonal über das Bild.
// Erreicht der Ausschnitt einen Bildrand prallt er mit 90° ab.
// Die Zufallselemente sollen monotone Bewegungsmuster verhindern.
// Startfunktion
function rightDown() {
// Ausschnitt-Koordinaten um einen Pixel nach rechts-unten
// und Bild-Koordinaten um einen Pixel nach links-oben verschieben
x++, y++, xAbs--, yAbs--;
move(); // Bewegung ausführen
// Sonderfälle
if(x==restWidth&&y==restHeight) setTimeout('leftUp()',40);
else if(x==restWidth) setTimeout('leftDown()',40);
else if(y==restHeight) setTimeout('rightUp()',40);
else if(Math.random()<0.001) setTimeout('rightUp()',40); // Zufallselement
else setTimeout('rightDown()',40);
// Ausschnitt bewegt sich weiter nach rechts-unten
}
function leftDown() {
x--, y++, xAbs++, yAbs--;
move();
if(x==0&&y==restHeight) setTimeout('rightUp()',40);
else if(x==0) setTimeout('rightDown()',40);
else if(y==restHeight) setTimeout('leftUp()',40);
else if(Math.random()<0.001) setTimeout('leftUp()',40);
else setTimeout('leftDown()',40);
}
function rightUp() {
x++, y--, xAbs--, yAbs++;
move();
if(x==restWidth&&y==0) setTimeout('leftDown()',40);
else if(x==restWidth) setTimeout('leftUp()',40);
else if(y==0) setTimeout('rightDown()',40);
else if(Math.random()<0.001) setTimeout('rightDown()',40);
else setTimeout('rightUp()',40);
}
function leftUp() {
x--, y--, xAbs++, yAbs++;
move();
if(x==0&&y==0) setTimeout('rightDown()',40);
else if(x==0) setTimeout('rightUp()',40);
else if(y==0) setTimeout('leftDown()',40);
else if(Math.random()<0.001) setTimeout('leftDown()',40);
else setTimeout('leftUp()',40);
}
</script>
</head>
<body bgcolor="#FFFFFF" onload="rightDown()">
<p>
<img id="image" style="position:absolute;top:10;left:10;clip:rect(0 180 110 0)"
src="nashorn.jpg" width="512" height="384" border="0" alt="">
</p>
</body>
</html>
|