MediaWiki:Skin/Mauszeiger.js: Unterschied zwischen den Versionen

aus Kamelopedia, der wüsten Enzyklopädie
Wechseln zu: Navigation, Suche
K (... ach, was soll's ... so macht's doppelt soviel Spaß ...)
K (kurz testen ... (Chrome tut nicht ganz richtig ... ))
Zeile 20: Zeile 20:
 
var k = $('body div.mouse').last();
 
var k = $('body div.mouse').last();
 
k.hide();
 
k.hide();
k.fadeIn(50, function() {
+
k.fadeIn(5, function() {
 
if($('body div.mouse').length < mouse.max) {
 
if($('body div.mouse').length < mouse.max) {
 
mouse.add();
 
mouse.add();

Version vom 29. September 2013, 20:00 Uhr

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: 200, // 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;
			}
		});
		mouse.x = newX;
		mouse.y = newY;		
	}
}
 
$(function() {
	mouse.init();
})