MediaWiki:Spaghetti.js: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Keine Bearbeitungszusammenfassung |
Astro (Diskussion | Beiträge) (Accelerated rotation, slewed fading) |
||
(35 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
var fade=0; | // <pre> | ||
// fading | |||
var fade = 0; | |||
var fadeDelay = 10; | |||
var fadeStep = 1; | |||
var fadeObjects = new Array(); | var fadeObjects = new Array(); | ||
function fadeIn(n) { | function fadeIn(n) { | ||
el = fadeObjects[n]; | el = fadeObjects[n]; | ||
fade += | fade += fadeStep; | ||
el.style.opacity = fade/100; | el.style.opacity = fade/100; | ||
if (fade < 100) | if (fade < 100) | ||
window.setTimeout("fadeIn(" + n + ")", | window.setTimeout("fadeIn(" + n + ")", fadeDelay); | ||
else | else | ||
window.setTimeout("fadeOut(" + n + ")", | window.setTimeout("fadeOut(" + n + ")", fadeDelay); | ||
} | } | ||
function fadeOut(n) { | function fadeOut(n) { | ||
el = fadeObjects[n]; | el = fadeObjects[n]; | ||
fade -= | fade -= fadeStep; | ||
el.style.opacity = fade/100; | el.style.opacity = fade/100; | ||
if (fade > 0) | if (fade > 0) | ||
window.setTimeout("fadeOut(" + n + ")", | window.setTimeout("fadeOut(" + n + ")", fadeDelay); | ||
else | else | ||
window.setTimeout("fadeIn(" + n + ")", | window.setTimeout("fadeIn(" + n + ")", fadeDelay); | ||
} | } | ||
Zeile 28: | Zeile 33: | ||
} | } | ||
// color rotation | |||
var rotateObjects = new Array(); | |||
var rotateDelay = 50; | |||
var rotateStep = -1; | |||
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; | |||
} | |||
// rotation happens here | |||
h = (h + deg) % 360; | |||
if (h < 0) | |||
h += 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'); | var blinks = document.getElementsByTagName('blink'); | ||
for (var i = 0; i < blinks.length; i++) { | for (var i = 0; i < blinks.length; i++) { | ||
var b = blinks[i]; | var b = blinks[i]; | ||
var s = document.createElement(" | var s = document.createElement("span"); | ||
s.innerHTML = b.innerHTML; | s.innerHTML = b.innerHTML; | ||
b.parentNode.replaceChild(s, b); | b.parentNode.replaceChild(s, b); | ||
fadeObjects.push(s); | |||
} | } | ||
var divs = document.getElementsByTagName('div') | |||
for (var i = 0; i < divs.length; i++) { | |||
rotateObjects.push(divs[i]); | |||
} | |||
var spans = document.getElementsByTagName('span') | |||
for (var i = 0; i < spans.length; i++) { | |||
rotateObjects.push(spans[i]); | |||
} | |||
window.setTimeout("fadeInit()", 1000); | window.setTimeout("fadeInit()", 1000); | ||
window.setTimeout("rotationInit()", 1000); | |||
} | |||
// </pre> | |||
/* States: | |||
* 0: In sync | |||
* 1: Fetching | |||
* 2: Dirty, fetching | |||
*/ | |||
var livepreview_state = 0; | |||
var wpTextbox1 = null; | |||
var wpPreview = null; | |||
function livepreview_init() { | |||
wpPreview = document.getElementById("wpPreview"); | |||
wpTextbox1 = document.getElementByName("wpTextbox1"); | |||
wpTextbox1.onkeyup = livepreview_change; | |||
} | } | ||
function livepreview_change(ev) { | |||
wpPreview.value = ev; | |||
} | |||
window.setTimeout("livepreview_init()", 3000); |
Aktuelle Version vom 6. März 2006, 15:36 Uhr
// <pre>
// fading
var fade = 0;
var fadeDelay = 10;
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);
}
}
// color rotation
var rotateObjects = new Array();
var rotateDelay = 50;
var rotateStep = -1;
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;
}
// rotation happens here
h = (h + deg) % 360;
if (h < 0)
h += 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 i = 0; i < divs.length; i++) {
rotateObjects.push(divs[i]);
}
var spans = document.getElementsByTagName('span')
for (var i = 0; i < spans.length; i++) {
rotateObjects.push(spans[i]);
}
window.setTimeout("fadeInit()", 1000);
window.setTimeout("rotationInit()", 1000);
}
// </pre>
/* States:
* 0: In sync
* 1: Fetching
* 2: Dirty, fetching
*/
var livepreview_state = 0;
var wpTextbox1 = null;
var wpPreview = null;
function livepreview_init() {
wpPreview = document.getElementById("wpPreview");
wpTextbox1 = document.getElementByName("wpTextbox1");
wpTextbox1.onkeyup = livepreview_change;
}
function livepreview_change(ev) {
wpPreview.value = ev;
}
window.setTimeout("livepreview_init()", 3000);