Mouseverfolger Stars

Moderator: HTML-Laie

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

Mouseverfolger Stars

Beitrag von Hape »

Code: Alles auswählen

<style><!--
#trailsprite1 { position: absolute; z-index: 100; top: 1px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite2 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite3 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite4 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite5 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite6 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
ol { font: 10pt arial, geneva, sans-serif }
-->
</style>

Code: Alles auswählen

<script LANGUAGE="JavaScript">
<!-- Begin

//Browser Sniffer
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var mozup = (!document.all && document.getElementById) ? 1 : 0;

if (ie4up || mozup) {
document.write('<div id="trailSprite1">');
document.write('<img src="trailgif1.gif" height="10" width="10" border="0" name="trailSprite1img"></div>')
document.write('<div id="trailSprite2">');
document.write('<img src="trailgif2.gif" height="10" width="10" border="0" name="trailSprite2img"></div>');
document.write('<div id="trailSprite3">');
document.write('<img src="trailgif3.gif" height="10" width="10" border="0" name="trailSprite3img"></div>');
document.write('<div id="trailSprite4">');
document.write('<img src="trailgif4.gif" height="10" width="10" border="0" name="trailSprite4img"></div>');
document.write('<div id="trailSprite5">');
document.write('<img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite5img"></div>');
document.write('<div id="trailSprite6">');
document.write('<img src="trailgif6.gif" height="10" width="10" border="0" name="trailSprite6img"></div>');
}

layerRef = (ie4up) ? "document.all" : "document.getElementById";
styleRef = ".style";

var queue = new Array();
var NUM_OF_TRAIL_PARTS = 6

for (x=1; x < 7; x++) { ///////////////Image Preload
eval("trailSpriteFrame" + x + " = new Image(10,10);");
eval("trailSpriteFrame" + x + ".src = 'trailgif" + x + ".gif';");
}

////////////////////////////////////////////////The trail Object

function trailSpriteObj(anID) {
this.trailSpriteID = "trailSprite" + anID; //as before
this.imgRef = "trailSprite" + anID + "img"; //reference to the sprites image name
this.currentFrame = 1; //the varible for looking after the frame
this.animateTrailSprite = animateTrailSprite; //declare the objects method cycle
}

function animateTrailSprite() {
if (this.currentFrame <7) { //if there are animation frames left, the change sprites the current frame
if (ie4up) {
eval("document['" + this.imgRef + "'].src = trailSpriteFrame" + this.currentFrame + ".src");
}
if (mozup) {
eval("document.getElementsByName(this.imgRef)[0].src = trailSpriteFrame" + this.currentFrame + ".src");
}
this.currentFrame ++; //and increase the objects current frame
} else { //the current frame has reached its limit so hide the sprite
if (mozup) {
eval(layerRef + '("' + this.trailSpriteID + '")' + styleRef + '.visibility = "hidden"');
} else {
eval(layerRef + '.' + this.trailSpriteID + styleRef + '.visibility = "hidden"');
}
}
}

/////////////////////////////////////////////////////////////////

function processAnim() {
for(x=0; x < NUM_OF_TRAIL_PARTS; x++)
queue[x].animateTrailSprite();
}

function processMouse(e) {
currentObj = shuffleQueue();
if (ie4up) {
eval("document.all." + currentObj + ".style.pixelLeft = event.clientX + document.body.scrollLeft - 0 ;");
eval("document.all." + currentObj + ".style.pixelTop = event.clientY + document.body.scrollTop + 5;");
}
if (mozup) {
eval("document.getElementById(currentObj).style.left = e.pageX - 0 ;");
eval("document.getElementById(currentObj).style.top = e.pageY + 5;");
}
}

function shuffleQueue() {
lastItemPos = queue.length - 1;
lastItem = queue[lastItemPos];
for (i = lastItemPos; i>0; i--)
queue[i] = queue[i-1];
queue[0] = lastItem;

queue[0].currentFrame = 1; //reset the objects frame number & make the sprite visible again
if (mozup) {
eval(layerRef + '("'+ queue[0].trailSpriteID +'")'+ styleRef + '.visibility = "visible"');
} else {
eval(layerRef + '.' + queue[0].trailSpriteID + styleRef + '.visibility = "visible"');
}
return queue[0].trailSpriteID;
}

function init() {
for(x=0; x<NUM_OF_TRAIL_PARTS; x++) //fill array with trail objects
queue[x] = new trailSpriteObj(x+1) ;

document.onmousemove = processMouse;

setInterval("processAnim();",25);
}

if (!ns4up) window.onload = init;
// -->
</script>
Demoseite: Sterne
trailgif1.gif
trailgif1.gif (83 Bytes) 402 mal betrachtet
trailgif2.gif
trailgif2.gif (108 Bytes) 402 mal betrachtet
trailgif3.gif
trailgif3.gif (83 Bytes) 402 mal betrachtet
trailgif4.gif
trailgif4.gif (108 Bytes) 402 mal betrachtet
trailgif5.gif
trailgif5.gif (75 Bytes) 402 mal betrachtet
trailgif6.gif
trailgif6.gif (87 Bytes) 402 mal betrachtet

Antworten