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



Meyer: CSS. Kurz und gut
- Anzeige -


- JavaScript : Grafik-Effekte : Clipping 2 -


Eine kleine 'Peepshow' mit JavaScript und CSS-Clipping.

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.


Demo:


Der Quelltext:

<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>


Download  Clipping_2.zip (mit Bild ca. 21 kb)




© 2001-2004 Albert Kluge - Alle Rechte vorbehalten
Impressum | Datenschutz | Nutzung | eMail