Mario & Luigis wunderbare Welt

Punkte kreisen um Mauszeiger (m) - Mario & Luigis wunderbare Welt
















Mario & Luigis wunderbare Welt
Startseite |
Charaktere |
Spiele |
Konsolen |
Nintendo |
Javascripts |
Webdesign |
Links |
Pagerank |
Awards |
Newsarchiv |
Gästebuch |
Impressum
Desktop-Version | Mobile Version
 Punkte kreisen um Mauszeiger
Beschreibung
Dieses Javascript generiert verschieden farbige Punkte, die um den Mauszeiger kreisen. Parameter, wie Abmessungen, Punktfarben, Rotationsrichtung, Kreisradius und Kreisgeschwindigkeit können im oberen Bereich des Scripts eingestellt werden. Für eine Rotation gegen den Uhrzeigersinn, muss der Wert von Rotation45 auf true gesetzt, und für eine Rotation im Uhrzeigersinn auf false gesetzt werden. Die Farben der einzelnen Punkte befinden sich in den () Klammern von var Punktefarben und werden im Hexadezimalformat (z.B. #FF0000), bzw. mit Farbcodenamen (red, green, blue, etc.) angegeben. Jeder einzelne Farbcode muss zwischen zwei " " Anführungszeichen stehen und diese müssen mit einem , Beistrich voneinander getrennt werden (z.B. new Array("#FF0000","#00FF00","#0000FF")). Für die Demonstration der Punkte kann man hier die Rotationsrichtung mit zwei Buttons ändern.
 
Technische Details
Mindestvoraussetzungen

CSS:2.0
Javascript:1.2/MS
Netscape:4.0
Internet Explorer:4.0
Firefox:1.0
Opera:7.0
Chrome:1.0
Safari:1.2
Konqueror:3.3


Verwendete intrinsische Funktionen
Methoden

Array()
cos()
for()
if()
round()
setTimeout()
sin()

Eigenschaften

body
clientX
clientY
left
length
onmousemove
pageX
pageXOffset
pageY
pageYOffset
PI
scrollLeft
scrollTop
style
top

 
Vorschau



 
Javascript einbinden
HTML-Code
<script type="text/javascript">
<!--
/*
© Valentin Hammer
Originalversion auf http://www.supermario.homepage.eu
*/



/***** HIER DIE EINSTELLUNGEN FÃœR DIE PUNKTE VORNEHMEN *****/

var Punktbreite45 = 10;
var Punkthoehe45 = 10;
var Punktfarben45 = new Array("#FF0000","#00FF00","#0000FF");
var Rotation45 = true;
var Kreisradius45 = 50;
var Drehgeschwindigkeit45 = 50;

/***** AB HIER NICHTS MEHR ÄNDERN *****/



var Punkte45 = "";
var Laenge45 = Punktfarben45.length;
var Maus_X45 = 0;
var Maus_Y45 = 0;
var Drehwinkel45 = 0;

for(var i=0;i<Laenge45;i++)
Punkte45 += '<form name="Punktform45" action="" style="width: '+Punktbreite45+'px; height: '+Punkthoehe45+'px; font-size: 1px; background-color: '+Punktfarben45[i]+'; position: absolute; overflow: hidden">&nbsp;</'+'form>';

document.write(Punkte45);

function bewegen45(Ereignis45)
{
if(!Ereignis45)
Ereignis45 = window.event;
if(Ereignis45)
{
Maus_X45 = (Ereignis45.clientX||Ereignis45.pageX||0)+(window.pageXOffset||document.body.scrollLeft||0)-Punktbreite45/2;
Maus_Y45 = (Ereignis45.clientY||Ereignis45.pageY||0)+(window.pageYOffset||document.body.scrollTop||0)-Punkthoehe45/2;

positionieren45();
}
}

function positionieren45()
{
for(var i=0;i<Laenge45;i++)
{
document.Punktform45[i].style.left = Maus_X45+Math.round(Math.sin((Drehwinkel45+i*360/Laenge45)*Math.PI/180)*Kreisradius45);
document.Punktform45[i].style.top = Maus_Y45+Math.round(Math.cos((Drehwinkel45+i*360/Laenge45)*Math.PI/180)*Kreisradius45);
}
}

function drehen45()
{
Drehwinkel45 += Rotation45 ? 5:-5;

positionieren45();

setTimeout(drehen45,Drehgeschwindigkeit45);
}

drehen45();

document.body.onmousemove = bewegen45;
//-->
</script>
 
Statistik
Zum Anzeigen der Besucherzahlen muss Javascript im Browser aktiviert sein.
Valid HTML 4.01 Transitional
CSS ist valide!
Copyright Valentin HammerZuletzt geändert am 6. Januar 2020