MediaWiki:Skin/Mauszeiger.js: Unterschied zwischen den Versionen
aus Kamelopedia, der wüsten Enzyklopädie
WiMu (Diskussion | Beiträge) K (... ach, was soll's ... so macht's doppelt soviel Spaß ...) |
WiMu (Diskussion | Beiträge) 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( | + | 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(); })