Mausverfolger mit Sternenstaub

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Mausverfolger mit Sternenstaub

Beitrag von Hape »

Code: Alles auswählen

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

var uInnerHTML = document.Sternenstaubform53.innerHTML ? 1:0;
var uNode = document.appendChild&&document.createElement&&document.createTextNode&&document.getElementsByTagName&&document.removeChild ? 1:0;
var uSplice = (new Array()).splice ? 1:0;
// HIER DIE EINSTELLUNGEN F&Uuml;R DEN STERNENSTAUB VORNEHMEN

var Zeichen53 = "*";
var Schriftart53 = "Arial";
var Schriftgroesse53 = 22;
var Schriftfarbe53 = "#FF0000";
var maximale_Anzahl53 = 50;
var maximale_Fallhoehe53 = 200;

// AB HIER NICHTS MEHR &Auml;NDERN
var Anzahl53 = 0;
var Positionen_X53 = new Array();
var Positionen_Y53 = new Array();
var Fallhoehen53 = new Array();
var nach_unten53 = new Array();
var Richtungen53 = new Array();

function Sternenstaub53(Ereignis53)
{
if(!Ereignis53)
Ereignis53 = window.event;
if(Ereignis53&&Anzahl53<maximale_Anzahl53)
{
Positionen_X53[Anzahl53] = (Ereignis53.clientX ? Ereignis53.clientX:(Ereignis53.pageX ? Ereignis53.pageX:0))+(window.pageXOffset ? window.pageXOffset:(document.body.scrollLeft ? document.body.scrollLeft:0));
Positionen_Y53[Anzahl53] = (Ereignis53.clientY ? Ereignis53.clientY:(Ereignis53.pageY ? Ereignis53.pageY:0))+(window.pageYOffset ? window.pageYOffset:(document.body.scrollTop ? document.body.scrollTop:0));
Fallhoehen53[Anzahl53] = 0;
nach_unten53[Anzahl53] = 3+Math.round(Math.random()*20)/10;
Richtungen53[Anzahl53] = (10-Math.round(Math.random()*20))/10;

if(uNode==1)
{
var Objekt53 = document.createElement("span");

with(Objekt53.style)
{
fontFamily = Schriftart53;
fontSize = Schriftgroesse53+"px";
color = Schriftfarbe53;
position = "absolute";
left = Positionen_X53[Anzahl53]+"px";
top = Positionen_Y53[Anzahl53]+"px";
}

Objekt53.appendChild(document.createTextNode(Zeichen53));

document.Sternenstaubform53.appendChild(Objekt53);
}
else
document.Sternenstaubform53.innerHTML += unescape('%3Cspan style="font-family: '+Schriftart53+'; font-size: '+Schriftgroesse53+'px; color: '+Schriftfarbe53+'; position: absolute; top: '+Positionen_Y53[Anzahl53]+'px; left: '+Positionen_X53[Anzahl53]+'px">'+Zeichen53+'%3C/span>');

Anzahl53++;
}
}

function Animation53()
{
for(var i=0;i<Anzahl53;i++)
{
with(document.Sternenstaubform53.getElementsByTagName("span")[i].style)
{
Positionen_X53[i] += Richtungen53[i];
Fallhoehen53[i] += nach_unten53[i];

fontSize = parseInt(Schriftgroesse53-Schriftgroesse53*Fallhoehen53[i]/maximale_Fallhoehe53)+"px";
top = parseInt(Positionen_Y53[i]+Fallhoehen53[i])+"px";
left = parseInt(Positionen_X53[i])+"px";
}

if(Fallhoehen53[i]>=maximale_Fallhoehe53-5)
{
with(document.Sternenstaubform53)
{
if(uNode==1)
removeChild(getElementsByTagName("span")[i]);
else
{
var Spans53 = innerHTML;
var neue_Spans53 = "";
var j53 = 0;

while(Spans53.indexOf("</")>-1)
{
var Stelle53 = Spans53.indexOf("</");

if(i!=j53)
neue_Spans53 += Spans53.substring(0,Stelle53+7);

Spans53 = Spans53.substring(Stelle53+7);
j53++;
}

innerHTML = neue_Spans53;
}
}

if(uSplice==1)
{
Positionen_X53.splice(i,1);
Positionen_Y53.splice(i,1);
Fallhoehen53.splice(i,1);
nach_unten53.splice(i,1);
Richtungen53.splice(i,1);
}
else
{
Positionen_X53 = Splice(Positionen_X53,i);
Positionen_Y53 = Splice(Positionen_Y53,i);
Fallhoehen53 = Splice(Fallhoehen53,i);
nach_unten53 = Splice(nach_unten53,i);
Richtungen53 = Splice(Richtungen53,i);
}

Anzahl53--;
}
}

window.setTimeout("Animation53()",50);
}

function Splice(das_Array53,Index53)
{
var neues_Array53 = new Array();
var Laenge53 = das_Array53.length-1;

for(var i=0;i<Laenge53;i++)
neues_Array53[i] = das_Array53[i+(i>=Index53 ? 1:0)];

return neues_Array53;
}

if(uInnerHTML==1||uNode==1)
{
Animation53();

document.onmousemove = Sternenstaub53;
}
//-->
</script>
Demoseite: https://hapes-javascript-demo-page.hpag ... staub.html

Antworten