MediaWiki:Skin/Mauszeiger.js

Hinweis: Leere nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
• Opera: Extras → Internetspuren löschen … → Individuelle Auswahl → Den kompletten Cache löschen

var mouse = {
    /* Achtung! Schlüsselwort "this" nur für jQuery verwenden ... gibt sonst zum Teil Komplikationen */
	init: function() {
		mouse.add();
		$('body').one('mouseover', function(event) {
			mouse.x = event.pageX;
			mouse.y = event.pageY;
			$('body').mousemove(function(event) {
				mouse.move(event.pageX, event.pageY);
			});
		});
	},
	max: 100, // maximale Anzahl Mauszeiger (bei 200 ruckelt's bei mir schon ganz schön doll ...)
	width: $( window ).width(),
	height: $( window ).height(),
	add: function() {
		var i = Math.floor(Math.random() * mouse.height);
		var j = Math.floor(Math.random() * mouse.width);
		$('body').append('<div class="mouse" style="top:0px; left;0px; margin-top:' + i + 'px; margin-left:' + j + 'px;"></div>');
		var k = $('body div.mouse').last();
		k.hide();
		k.fadeIn(5, function() {
			if($('body div.mouse').length < mouse.max) {
				mouse.add();
			}
		});
	},
	move: function(newX, newY) {
		var x = newX - mouse.x;
		var y = newY - mouse.y;
		$('body div.mouse').each(function(index) {
			switch(index % 8) {
			case 0: // alles richtigrum
				$(this).css('left', "+=" + x);
				$(this).css('top', "+=" + y);
				break;
			case 1: // links und rechts vertauscht
				$(this).css('left', "-=" + x);
				$(this).css('top', "+=" + y);
				break;
			case 2: // oben und unten vertauscht
				$(this).css('left', "+=" + x);
				$(this).css('top', "-=" + y);
				break;
			case 3: // alles vertauscht
				$(this).css('left', "-=" + x);
				$(this).css('top', "-=" + y);
				break;
			case 4: // alles richtigrum aber mit falschen Werten
				$(this).css('left', "+=" + y);
				$(this).css('top', "+=" + x);
				break;
			case 5: // links und rechts vertauscht und mit falschen Werten
				$(this).css('left', "-=" + y);
				$(this).css('top', "+=" + x);
				break;
			case 6: // oben und unten vertauscht und mit falschen Werten
				$(this).css('left', "+=" + y);
				$(this).css('top', "-=" + x);
				break;
			case 7: // alles vertauscht und mit falschen Werten
				$(this).css('left', "-=" + y);
				$(this).css('top', "-=" + x);
				break;
			}
			var pos = $(this).offset();
			if( ( pos.top <= -50 ) || ( pos.top >= mouse.height + 50 ) || ( pos.left <= -50 ) || ( pos.left >= mouse.width + 50 ) ) {
				$(this).remove();
				mouse.add();
			}
		});
		mouse.x = newX;
		mouse.y = newY;		
	}
}
 
$(function() {
	mouse.init();
})