Halloween Mausverfolger

(247 Bewertungen, ∅ 3,06 von 5)
Du musst eingeloggt sein um bewerten zu können.

Bis Halloween ist es ja nun nicht mehr so lang, daher stellen wir für euch mal diesen Halloween-Mausverfolger mit dem Kürbis hier zur Verfügung.

Einfach den Quelltext in den HTML-Quellcode der Seite einfügen:

Ihr müsst aber noch das Bild in dem <img…> Tag anpassen. Ladet dazu das folgende Bild runter und speichert es auf eurer Seite.

Update: Dieser Mausverfolger funktioniert nun auch im Mozilla Firefox, er funktioniert ebenfalls im Internet Explorer und wurde auch mit Opera erfolgreich getestet!

Falls ihr einen anderen zu Halloween passenden Mausverfolger sucht, könnt ihr auch mal einen Blick auf den Fledermaus-Mausverfolger werfen.

<div id="dot0" style="position: absolute; visibility: hidden; height: 41; width: 40;"></div>
<div id="dot1" style="position: absolute; height: 41; width: 40;"><img class=" size-full wp-image-323" src="kuerbis.gif" width="40" height="41" alt="" width="40" height="41" /></div>
<div id="dot2" style="position: absolute; height: 41; width: 40;"><img class=" size-full wp-image-323" src="kuerbis.gif" width="40" height="41" alt="" width="40" height="41" /></div>
<div id="dot3" style="position: absolute; height: 41; width: 40;"><img class=" size-full wp-image-323" src="kuerbis.gif" width="40" height="41" alt="" width="40" height="41" /></div>
<div id="dot4" style="position: absolute; height: 41; width: 40;"><img class=" size-full wp-image-323" src="kuerbis.gif" width="40" height="41" alt="" width="40" height="41" /></div>
<div id="dot5" style="position: absolute; height: 41; width: 40;"><img class=" size-full wp-image-323" src="kuerbis.gif" width="40" height="41" alt="" width="40" height="41" /></div>
<div id="dot6" style="position: absolute; height: 41; width: 40;"><img class=" size-full wp-image-323" src="kuerbis.gif" width="40" height="41" alt="" width="40" height="41" /></div>
<script type='text/javascript'>
<!--
var nDots = 7;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;

// fixed time step, no relation to real time
var DELTAT = .01;
  // size of one spring in pixels
var SEGLEN = 10;
  // spring constant, stiffness of springs
var SPRINGK = 10;
  // all the physics is bogus, just picked stuff to
  // make it look okay
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
  // stopping criterea to prevent endless jittering
  // doesn't work when sitting on bottom since floor
  // doesn't push back so acceleration always as big
  // as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 35;
  // BOUNCE is percent of velocity retained when 
  // bouncing off a wall
var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";

// always on for now, could be played with to
  // let dots fall to botton, get thrown, etc.
var followmouse = true;

function dot(i) 
{
    this.X = Xpos;
    this.Y = Ypos;
    this.dx = 0;
    this.dy = 0;
    this.obj = eval("document.getElementById('dot" + i + "').style");
}

document.onmousemove = MoveHandler;

function startanimate() {	
    setInterval("animate()", 20);
}

// just save mouse position for animate() to use
function MoveHandler(e) {

if (!e) {
		Xpos = window.event.x + document.documentElement.scrollLeft;
		Ypos = window.event.y + document.documentElement.scrollTop;
	} else {
		Xpos = e.pageX;
		Ypos = e.pageY;
	}
}

function vec(X, Y)
{
    this.X = X;
    this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}

// get size of window
        var height, width;
        if (isNetscape) {
            height = window.innerHeight + document.scrollTop;
            width = window.innerWidth + document.scrollLeft;
        } else {	
            height = document.body.clientHeight + document.documentElement.scrollTop;
            width = document.body.clientWidth + document.documentElement.scrollLeft;
        }
        
        // bounce of 3 walls (leave ceiling open)
        if (dots[i].Y >=  height - DOTSIZE - 1) {
            if (dots[i].dy > 0) {
                dots[i].dy = BOUNCE * -dots[i].dy;
            }
            dots[i].Y = height - DOTSIZE - 1;
        }
        if (dots[i].X >= width - DOTSIZE) {
            if (dots[i].dx > 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = width - DOTSIZE - 1;
        }
        if (dots[i].X < 0) {
            if (dots[i].dx < 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = 0;
        }
        
        // move img to new position
        dots[i].obj.left = dots[i].X + "px";
        dots[i].obj.top =  dots[i].Y + "px";
    }
}
//-->
</script>
<br />
JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/mausverfolger/halloween-mausverfolger/" target="_blank">kostenlose-javascripts.de</a>

4 Kommentare

Schreibe einen Kommentar Antworten abbrechen