|
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 & Ballerspiel
• Lichtjockey
HTML
• HTML 5 Grundgerüst
CSS
• Responsive Tabelle
|
| [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:
1
2
3
4
5
6
7
8
9
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.
1
2
3
4
5
6
7
8
9
| 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:
1
2
3
4
5
6
7
8
9
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.
1
2
3
4
5
6
7
8
9
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.
|
|
