Mausverfolger Textkreis(2)

Moderator: HTML-Laie

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

Mausverfolger Textkreis(2)

Beitrag von Hape »

Auch dieses Script läßt einen Text um den Mauszeiger rotieren.

Code: Alles auswählen

<script type='text/javascript'>
<!--
if (document.getElementById) {
//Passe Text,Schriftart und Farbe an!
yourLogo = "Hapes-Javascript-Forum "; //Hier Dein Text!
logoFont = "Arial";
logoColor = "0000CC";
//Hier nichts mehr ändern!
yourLogo = yourLogo.split('');
L = yourLogo.length;
TrigSplit = 360 / L;
Sz = new Array()
logoWidth = 100;
logoHeight = -30;
ypos = 0;
xpos = 0;
step = 0.03;
currStep = 0;
document.write('<div id="outermausi" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < L; i++) {
document.write('<div id="ie'+i+'" style="position:absolute;top:0px;left:0px;'+'width:10px;height:10px;font-family:'+logoFont+';'+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
}
document.write('</div></div>');
function Mouse(e) {
ypos = (e)?e.pageY:event.y;
xpos = (e)?e.pageX-5:event.x-5;
}document.onmousemove=Mouse;
function animateLogo() {
document.getElementById('outermausi').style.top = document.documentElement.scrollTop;
for (i = 0; i < L; i++) {
eltop=document.getElementById('ie'+i).style.top;
document.getElementById('ie'+i).style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180)+"px";
document.getElementById('ie'+i).style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180)+"px";
Sz[i] = eltop.substr(0, eltop.length-2) - ypos;
if (Sz[i] < 5) Sz[i] = 5;
document.getElementById('ie'+i).style.fontSize = (Sz[i] / 1.7);
}
currStep -= step;
setTimeout('animateLogo()', 20);
}
window.onload = animateLogo;
}
//-->
</script>

<script language="Javascript" type="text/javascript" document.onmousemove=Mouse; ></script>
Demoseite dazu hier: Textkreis-2

Antworten