MediaWiki:Spaghetti.js: Unterschied zwischen den Versionen

Aus C3D2
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 30: Zeile 30:
     fadeIn(i);
     fadeIn(i);
   }
   }
}
function include(script_filename) {
    document.write('<' + 'script');
    document.write(' language="javascript"');
    document.write(' type="text/javascript"');
    document.write(' src="' + script_filename + '">');
    document.write('</' + 'script' + '>');
}
}


Zeile 128: Zeile 136:
   setTimeout("rotateColors" + args, rotateDelay);
   setTimeout("rotateColors" + args, rotateDelay);
}               
}               
function rotationInit() {
  for (var i = 0; i < rotateObjects.length; i++) {
    setTimeout("rotateColors(" + i + ", \"color\", " + rotateStep + ")",1000);
    setTimeout("rotateColors(" + i + ", \"background-color\", " + rotateStep +  ")",1000);
  }
}





Version vom 5. März 2006, 09:11 Uhr

// fading

var fade = 0;
var fadeDelay = 5;
var fadeStep = 1;
var fadeObjects = new Array();

function fadeIn(n) {
  el = fadeObjects[n];
  fade += fadeStep;
  el.style.opacity = fade/100;
  if (fade < 100)
    window.setTimeout("fadeIn(" + n + ")", fadeDelay);
  else
    window.setTimeout("fadeOut(" + n + ")", fadeDelay);
}

function fadeOut(n) {
  el = fadeObjects[n];
  fade -= fadeStep;
  el.style.opacity = fade/100;
  if (fade > 0)
    window.setTimeout("fadeOut(" + n + ")", fadeDelay);
  else
    window.setTimeout("fadeIn(" + n + ")", fadeDelay);
}

function fadeInit() {
  for (var i = 0; i < fadeObjects.length; i++) {
    fadeIn(i);
  }
}

function include(script_filename) {
    document.write('<' + 'script');
    document.write(' language="javascript"');
    document.write(' type="text/javascript"');
    document.write(' src="' + script_filename + '">');
    document.write('</' + 'script' + '>');
}

// color rotation
var rotateObjects = new Array();
var rotateDelay = 100;
var rotateStep = 5;


function rotationInit() {
  for (var i = 0; i < rotateObjects.length; i++) {
    setTimeout("rotateColors(" + i + ", \"color\", " + rotateStep + ")",1000);
    setTimeout("rotateColors(" + i + ", \"background-color\", " + rotateStep +  ")",1000);
  }             
}               
                
function rotateColors(n, att, deg) {
  var el = rotateObjects[n];
                
  var style_ = document.defaultView.getComputedStyle(el, null);
                
  if (!style_) return;
                
  var value = style_.getPropertyCSSValue(att);
                
  if (!value) return;
                
  var color = value.getRGBColorValue();
  if (!color) return;
                
  var red = parseInt(color.red.cssText);
  var green = parseInt(color.green.cssText);
  var blue = parseInt(color.blue.cssText);
                
  // see [http://de.wikipedia.org/wiki/HSV-Farbraum]
                
  red /= 255;   
  green /= 255; 
  blue /= 255;  
                
  var max = Math.max(red, green, blue);
  var min = Math.min(red, green, blue);

  if (max == min) return;

  var h;

  if (max == red) {
    h = (0 + (green - blue) / (max - min)) * 60;
  } else if (max == green) {
    h = (2 + (blue - red) / (max - min)) * 60;
  } else if (max == blue) {
    h = (4 + (red - green) / (max - min)) * 60;
  }

  if (h < 0)
    h += 360;
  
  // rotation happens here
  h = (h + deg) % 360;
  
  var s = (max - min) / max;
  var v = max;
  
  // back to rgb
                
  var hi = Math.floor(h / 60) % 6;
  var f = h / 60 - hi;
  var p = v * (1 - s);
  var q = v * (1 - s*f);
  var t = v * (1 - s*(1-f));
                
  switch (hi) { 
    case 0:     
      red = v; green = t; blue = p; break;
    case 1:     
      red = q; green = v; blue = p; break;
    case 2:     
      red = p; green = v; blue = t; break;
   case 3:      
      red = p; green = q; blue = v; break;
    case 4:     
      red = t; green = p; blue = v; break;
    case 5:     
      red = v; green = p; blue = q; break;
  }             
                
  red = Math.floor(red*255);
  green = Math.floor(green*255);
  blue = Math.floor(blue*255);
                
  var colorString = "rgb(" + red + "," + green + "," + blue + ")";
                
  el.style.setProperty(att, colorString, null);
                
  var args = "(" + n + ", \"" + att + "\" ," + deg + ")";
                
  setTimeout("rotateColors" + args, rotateDelay);
}               


function spaghetti() {
  var blinks = document.getElementsByTagName('blink');

  for (var i = 0; i < blinks.length; i++) {
    var b = blinks[i];
    var s = document.createElement("span");
    s.innerHTML = b.innerHTML;
    b.parentNode.replaceChild(s, b);
    fadeObjects.push(s);
  }  

  var divs = document.getElementsByTagName('div')
  for (var div in divs) {
    rotateObjects.push(div);
  }

  window.setTimeout("fadeInit()", 1000);
  window.setTimeout("rotationInit()", 1000);
}