[Übersicht]
Tutorials > Javascript > Navigation > Rotationsmenue  

  PHP Basics
   Administrationsbereich
   Counter
   Umfrage
   Kalender
   Kontaktformular
  Javascript
   WebAudio Player
   WebAudio Player Singles
   Web-Farbmixer
   Beim Scrollen nachladen
     Canvas
      Weihnachtskalender
      BCD Uhr
      Analog Anzeigeinstrument
      Drehregler
      Schieberegler
      Schiebeschalter
     Navigation
      Registerkarten-Navigation
      Rotationsmenue
     Animation & Spiele
      Warp-Flug
      Lichtjockey
  HTML
   HTML 5 Grundgerüst
  CSS
   Responsive Tabelle






php



webhostingbanner 250x250


[Beispiel]   [Download]  

Das Rotationsmenü ist auf der Startseite der Tutorials zu sehen.
Einigen ist es vielleicht noch aus den ersten "Tomb Raider" Spielen bekannt...

Als erstes werden die erforderlichen Daten in einem Array gespeichert.
Jedes Element erhält ein Bild und einen Link als Ziel:










10 
11 
var mkElements = new Array();

mkElements[0] = new Array(3);
mkElements[0]['bild'] = 'images/php.gif';
mkElements[0]['link'] = 'seite1.php';

mkElements[1] = new Array(3);
mkElements[1]['bild'] = 'images/php.gif';
mkElements[1]['link'] = 'seite2.php';

// usw.


Im ersten Schritt werden alle Bilder vorgeladen, alle Elemente erzeugt und mit dem DOM verknüpft.
Dazu gehören der Zentrierpunkt, die zwei zr Steuerung anklickbaren Flächen des Kreises Hälften,
sowie ein DIV je verlinktem Bild. Dazu kommen, falls eingestellt, je ein Bild als Schatteneffekt.

Den ganzen Code dazu ist im Download enthalten. Hier würde er zu viel Platz einnehmen.










for( loadID = 0; loadID < mkElements.length; loadID++ )
{
oneImgId = 'orgImg'+loadID;
oneImgStack = new Image();
oneImgStack.name = oneImgId;
oneImgStack.src = mkElements[loadID]['bild'];
oneImgStack.width = this.naturalWidth;
oneImgStack.height = this.naturalHeight;
}


Um den Kreis aufzubauen, wird nun vom Zentrierpunkt ausgehend der Abstand und der Winkel zu jedem Element
durch Sinus- und Cosinusfunktionen berechnet und es entsprechend absolut positioniert. 90 Grad werden abgezogen,
da unser aktives Element unten liegt, der NUllpunkt eines Einheitskreises jedoch rechts. Dazu müssen noch alle Winkel
ins Bodenmaß umgerechnet werden. Der Kreis kann dabei natürlich auch eine Ellipse sein, je nach Konfiguration:










10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
// Startpunkte auf Kreis- oder Ellipsenbahn
alphaGrad = ( mkAbstand * setPos ) - 90;
if( alphaGrad < 0 )
{
alphaGrad = alphaGrad + 360;
} else
if( alphaGrad > 360 )
{
alphaGrad = alphaGrad - 360;
}

alphaBogen = ( alphaGrad * Math.PI * 2 ) / 360;

mkYpre = Math.sin(alphaBogen) * ( mkWidth / 2 );
mkYpre = mkYpre * (-1);
mkYpre = Math.round(mkYpre,0);
mkY = Math.round((mkYpre * mkFaktor),0);

if( alphaGrad == 0 )
{
mkX = -(mkWidth/2);
} else
if( alphaGrad == 180 )
{
mkX = (mkWidth/2);
} else
{
mkX = mkYpre / Math.tan(alphaBogen);
}

mkX = Math.round(mkX,0);
mkX = mkX - ( currentWidth / 2 );
mkY = mkY - ( currentHeight / 2 );

mkElements[setPos]['startX'] = mkLeft + mkX;
mkElements[setPos]['startY'] = mkTop + mkY;
mkElements[setPos]['left'] = ( mkLeft + 0 );
mkElements[setPos]['top'] = ( mkTop + 0 );
currentDiv.style.left = ( mkLeft + 0 ) + 'px';
currentDiv.style.top = ( mkTop + 0 ) + 'px';


Dieses Menü kann die Elemente beim Initialisieren noch auseinanderdriften lassen (Explosion).
Dazu werden die Elementpositionen nur nochmal in einer SChleife mit anderen Radien berechnet.
Bei einer Implosion (Klick auf ein Element und Verlassen der Seite) geht alles nur andersherum.










10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
function mkExplode()
{
for( setPos = 0; setPos < mkLength; setPos++ )
{
zielX = mkElements[setPos]['startX'];
zielY = mkElements[setPos]['startY'];
currentObj = 'mkObj_'+(setPos+1);
currentDiv = document.getElementById(currentObj);

if( zielX >= mkLeft && zielY >= mkTop )
{
// Quadrant UR
nextX = mkLeft + ( ( ( zielX - mkLeft ) / mkExSteps ) * mkExCounter );
nextY = mkTop + ( ( ( zielY - mkTop ) / mkExSteps ) * mkExCounter );
} else
if( zielX < mkLeft && zielY >= mkTop )
{
// Quadrant UL
nextX = mkLeft - ( ( ( mkLeft - zielX ) / mkExSteps ) * mkExCounter );
nextY = mkTop + ( ( ( zielY - mkTop ) / mkExSteps ) * mkExCounter );
} else
if( zielX < mkLeft && zielY < mkTop )
{
// Quadrant OL
nextX = mkLeft - ( ( ( mkLeft - zielX ) / mkExSteps ) * mkExCounter );
nextY = mkTop - ( ( ( mkTop - zielY ) / mkExSteps ) * mkExCounter );
} else
if( zielX >= mkLeft && zielY < mkTop )
{
// Quadrant OR
nextX = mkLeft + ( ( ( zielX - mkLeft ) / mkExSteps ) * mkExCounter );
nextY = mkTop - ( ( ( mkTop - zielY ) / mkExSteps ) * mkExCounter );
} else
{
nextX = 0;
nextY = 0;
}

currentDiv.style.left = nextX + 'px';
currentDiv.style.top = nextY + 'px';

mkElements[setPos]['left'] = nextX;
mkElements[setPos]['top'] = nextY;

mkResize(setPos,nextY);
}
}


Beim Klick auf eine der Schaltflächen (halbe Fläche des Kreises) start ein Rotationsvorgang.
Dabei wird ein Winkel zwischen 2 Objekten in einer Programmschleife zerteilt uns schrittweise verschoben.
Anhängig vom Winkel werden die Elemente als 3D-Effekt noch etwas verkleinert.

Da das ganze Menü absolut positioniert wird, muss je nach Rest der Homepage eine Positionskorrektur durchgeführt werden.