Mausverfolger mit Sternschnuppen

Moderator: HTML-Laie

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

Mausverfolger mit Sternschnuppen

Beitrag von Hape »

Code: Alles auswählen

<script language="Javascript">
<!--
/* Written by:
* Terry Yuen.
* Works inspired by Tendertron cartoons.
* "This one's for the kids!"
*
* modified by N8i (www.nightfire.ch)
* Script works now on all DOM browsers
*/

var ITEM_COUNT = 6; //number of flakes visible per time
var ITEM_W = 20; //width of a single flake
var ITEM_H = 20; //height of a single flake
var ITEM_SRC = "/star.gif"; // your image
var ITEM_STAGES = 4; //number of life stages for a single flake. (i.e., number of states on the "star.gif")
var ITEM_TRAVEL = 20; //number of times to move a flake before disappearing (Note: PIXEL MOVED = ITEM_TRAVEL * ITEM_INCREMENT)
var ITEM_INCREMENT = 4; //distance to move a flake on each loop
var ITEM_SPEED = 50; //time delay in milliseconds before looping (def: 40)

// END CONFIGURABLE CONSTANTS

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

var animatorThread = null;

// To prevent a new flake from being created
// on each loop time, we give it a sleep counter
// that increments.
var sprawnSleeping = 0;

// Stores the position of mouse.
var mousePos = new Array(2);
mousePos[0] = 0;
mousePos[1] = 0;

// Stores previous positions of mouse.
// So that we don't create a flake when
// the mouse hasn't moved.
var oldMousePos = new Array(2);
oldMousePos[0] = 0;
oldMousePos[1] = 0;

// A table of flake positions and information.
var trailMatrix = new Array(ITEM_COUNT);
for(var i=0; i<trailMatrix.length; i++) {
trailMatrix[i] = new Array(5);
trailMatrix[i][0] = 0;
trailMatrix[i][1] = 0;
trailMatrix[i][2] = 0;
trailMatrix[i][3] = ITEM_STAGES;
trailMatrix[i][4] = "mouseTrailer_" + i;

if (ie4up || mozup) {
document.writeln('<DIV ID="' + trailMatrix[i][4] + '" STYLE="position:absolute; width:'+ITEM_W+'px; height:'+ITEM_H+'px; visibility:hidden;"><img src="'+ITEM_SRC+'" border=0></DIV>');
} else {
document.writeln('<LAYER ID="' + trailMatrix[i][4] + '" position="absolute" width='+ITEM_W+' height='+ITEM_H+' visible="hide"><img src="'+ITEM_SRC+'" border=0></LAYER>');
}
}

function storeMousePos(e) {
mousePos[0] = (ie4up) ? event.clientX+document.body.scrollLeft : (ns4up || mozup) ? e.pageX : 0;
mousePos[1] = (ie4up) ? event.clientY+document.body.scrollTop : (ns4up || mozup) ? e.pageY : 0;
}

function sprawnNewTrail() {
if(oldMousePos[0] != mousePos[0] || oldMousePos[1] != mousePos[1]) {
var temp = trailMatrix[trailMatrix.length-1][4];
for(var i=trailMatrix.length-1; i>0; i--) {
trailMatrix[i][0] = trailMatrix[i-1][0];
trailMatrix[i][1] = trailMatrix[i-1][1];
trailMatrix[i][2] = trailMatrix[i-1][2];
trailMatrix[i][3] = trailMatrix[i-1][3];
trailMatrix[i][4] = trailMatrix[i-1][4];
}
trailMatrix[0][0] = mousePos[0];
trailMatrix[0][1] = mousePos[1];
trailMatrix[0][2] = ITEM_TRAVEL;
trailMatrix[0][3] = ITEM_STAGES;
trailMatrix[0][4] = temp; //id for trailer layer
}
oldMousePos[0] = mousePos[0];
oldMousePos[1] = mousePos[1];
}

function animateTrail() {
for(var i=0; i<trailMatrix.length; i++) {
if(trailMatrix[i][2] > 0) {
trailMatrix[i][1] += ITEM_INCREMENT;
trailMatrix[i][2]--;
trailMatrix[i][3] = Math.ceil((trailMatrix[i][2] * ITEM_STAGES) / ITEM_TRAVEL);
updateTrail(trailMatrix[i][4], trailMatrix[i][0], trailMatrix[i][1], trailMatrix[i][3]);
} else {
hideTrail(trailMatrix[i][4]);
}
}
sprawnSleeping++;
if(sprawnSleeping >= 2) { //We create a new flake every 2 loops
sprawnSleeping = 0;
sprawnNewTrail();
}
}

function updateTrail(obj, x, y, stage) {
var imgTop = (ITEM_STAGES - stage) * ITEM_H;
if(ie4up) {
document.all[obj].style.clip = "rect("+imgTop +" "+ ITEM_W +" "+ (imgTop+ITEM_H)+" 0)";
document.all[obj].style.left = x;
document.all[obj].style.top = y - imgTop;
document.all[obj].style.visibility = "visible";
}
if(ns4up) {
document.layers[obj].clip.top = imgTop;
document.layers[obj].clip.bottom = imgTop + ITEM_H;
document.layers[obj].left = x;
document.layers[obj].top = y - imgTop;
document.layers[obj].visibility = "show";
}
if(mozup) {
document.getElementById(obj).style.clip = "rect("+imgTop +" "+ ITEM_W +" "+ (imgTop+ITEM_H)+" 0)";
document.getElementById(obj).style.left = x;
document.getElementById(obj).style.top = y - imgTop;
document.getElementById(obj).style.visibility = "visible";
}
}

function hideTrail(obj) {
if(ie4up) {
document.all[obj].style.visibility = "hidden";
}
if(ns4up) {
document.layers[obj].visibility = "hide";
}
if(mozup) {
document.getElementById(obj).style.visibility = "hidden";
}

}

function init() {
if(ns4up) document.captureEvents(Event.MOUSEMOVE);
if(ie4up || ns4up || mozup) {
document.onmousemove = storeMousePos;
animatorThread = setInterval("animateTrail()", ITEM_SPEED);
}
}

function end() {
if(animatorThread != null) {
clearInterval(animatorThread);
animatorThread = null;
}
}
//-->
</script>
Demoseite: https://hapes-javascript-demo-page.hpag ... uppen.html
Dateianhänge
star.gif
star.gif (290 Bytes) 5216 mal betrachtet

Antworten