Mausverfolger mit Sternen (8)

Moderator: HTML-Laie

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

Mausverfolger mit Sternen (8)

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>
<!-- Begin cut or copy here -->
<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="/trailgif5.gif" height="10" width="10" border="0" name="trailSprite1img"></div>')
document.write('<div id="trailSprite2">');
document.write('<img src="/trailgif5.gif" height="10" width="10" border="0" name="trailSprite2img"></div>');
document.write('<div id="trailSprite3">');
document.write('<img src="/trailgif5.gif" height="10" width="10" border="0" name="trailSprite3img"></div>');
document.write('<div id="trailSprite4">');
document.write('<img src="/trailgif5.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="/trailgif5.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>

<!-- End cut or copy here --> 
Hier eine Demoseite: https://hapes-javascript-demo-page.hpag ... stars.html
Dateianhänge
trailgif.zip
(1.12 KiB) 237-mal heruntergeladen

Antworten