Code: Alles auswählen
<script type='text/javascript'>
<!--
var xLayerNo=0;
function xLayer(newLayer, x, y, w)
{
if(x==null)x=0;
if(y==null)y=0;
if(w==null)w=100;
if(document.layers)
{
if(typeof newLayer == "string")
{
this.layer=new Layer(w);
this.layer.document.open();
this.layer.document.write(newLayer);
this.layer.document.close();
}
else
this.layer=newLayer;
this.layer.moveTo(x,y);
this.images=this.layer.document.images;
}
else
if(document.all)
{
var Xname;
if(typeof newLayer == "string")
{
xName="xLayer" + xLayerNo++;
var txt = "<DIV ID='" + xName
+ "' STYLE='position:absolute;"
+ "left:" + x + ";"
+ "top:" + y + ";"
+ "width:" + w + ";"
+ "visibility:hidden'>"
+ newLayer
+ "</DIV>";
document.body.insertAdjacentHTML("BeforeEnd",txt);
}
else
xName=newLayer.id;
this.content = document.all[xName];
this.layer = document.all[xName].style;
this.images = document.images;
}
else
if (document.getElementById)
{
/*** Add Netscape 6.0 support (NOTE: This may work in I.E. 5+. Will have to test***/
var newDiv;
if(typeof newLayer == "string")
{
var xName="xLayer" + xLayerNo++;
var txt = ""
+ "position:absolute;"
+ "left:" + x + "px;"
+ "top:" + y + "px;"
+ "width:" + w + "px;"
+ "visibility:hidden";
var newRange = document.createRange();
newDiv = document.createElement("DIV");
newDiv.setAttribute("style",txt);
newDiv.setAttribute("id", xName);
document.body.appendChild(newDiv);
newRange.setStartBefore(newDiv);
strFrag = newRange.createContextualFragment(newLayer);
newDiv.appendChild(strFrag);
}
else
newDiv = newLayer;
this.content = newDiv;
this.layer = newDiv.style;
this.images = document.images;
}
return(this);
}
function xLayerFromObj(theObj)
{
if(document.layers)
return(new xLayer(document.layers[theObj]));
else
if(document.all)
return(new xLayer(document.all[theObj]));
else
if(document.getElementById)
return(new xLayer(document.getElementById(theObj)));
}
if(navigator.appName.indexOf("Netscape") != -1 && !document.getElementById)
{
var eventmasks = {
onabort:Event.ABORT, onblur:Event.BLUR, onchange:Event.CHANGE,
onclick:Event.CLICK, ondblclick:Event.DBLCLICK,
ondragdrop:Event.DRAGDROP, onerror:Event.ERROR,
onfocus:Event.FOCUS, onkeydown:Event.KEYDOWN,
onkeypress:Event.KEYPRESS, onkeyup:Event.KEYUP, onload:Event.LOAD,
onmousedown:Event.MOUSEDOWN, onmousemove:Event.MOUSEMOVE,
onmouseout:Event.MOUSEOUT, onmouseover:Event.MOUSEOVER,
onmouseup:Event.MOUSEUP, onmove:Event.MOVE, onreset:Event.RESET,
onresize:Event.RESIZE, onselect:Event.SELECT, onsubmit:Event.SUBMIT,
onunload:Event.UNLOAD
};
/**** START prototypes for NS ***/
xLayer.prototype.moveTo = function(x,y) { this.layer.moveTo(x,y); }
xLayer.prototype.moveBy = function(x,y) { this.layer.moveBy(x,y); }
xLayer.prototype.show = function() { this.layer.visibility = "show"; }
xLayer.prototype.hide = function() { this.layer.visibility = "hide"; }
xLayer.prototype.setzIndex = function(z) { this.layer.zIndex = z; }
xLayer.prototype.setBgColor = function(color) { this.layer.bgColor = color; }
xLayer.prototype.setBgImage = function(image) { this.layer.background.src = image; }
xLayer.prototype.getX = function() { return this.layer.left; }
xLayer.prototype.getY = function() { return this.layer.top; }
xLayer.prototype.getWidth = function() { return this.layer.width; }
xLayer.prototype.getHeight = function() { return this.layer.height; }
xLayer.prototype.getzIndex = function() { return this.layer.zIndex; }
xLayer.prototype.isVisible = function() { return this.layer.visibility == "show"; }
xLayer.prototype.setContent = function(xHtml)
{
this.layer.document.open();
this.layer.document.write(xHtml);
this.layer.document.close();
}
xLayer.prototype.clip = function(x1,y1, x2,y2)
{
this.layer.clip.top =y1;
this.layer.clip.left =x1;
this.layer.clip.bottom =y2;
this.layer.clip.right =x2;
}
xLayer.prototype.addEventHandler = function(eventname, handler)
{
this.layer.captureEvents(eventmasks[eventname]);
var xl = this;
this.layer[eventname] = function(event) {
return handler(xl, event.type, event.x, event.y,
event.which, event.which,
((event.modifiers && Event.SHIFT_MASK) != 0),
((event.modifiers && Event.CTRL_MASK) != 0),
((event.modifiers && Event.ALT_MASK) != 0));
}
}
/*** END NS ***/
}
else if(document.all)
{
/*** START prototypes for IE ***/
xLayer.prototype.moveTo = function(x,y)
{
this.layer.pixelLeft = x;
this.layer.pixelTop = y;
}
xLayer.prototype.moveBy = function(x,y)
{
this.layer.pixelLeft += x;
this.layer.pixelTop += y;
}
xLayer.prototype.show = function() { this.layer.visibility = "visible"; }
xLayer.prototype.hide = function() { this.layer.visibility = "hidden"; }
xLayer.prototype.setzIndex = function(z) { this.layer.zIndex = z; }
xLayer.prototype.setBgColor = function(color) { this.layer.backgroundColor = color; }
xLayer.prototype.setBgImage = function(image) { this.layer.backgroundImage = image; }
xLayer.prototype.setContent = function(xHtml) { this.content.innerHTML=xHtml; }
xLayer.prototype.getX = function() { return this.layer.pixelLeft; }
xLayer.prototype.getY = function() { return this.layer.pixelTop; }
xLayer.prototype.getWidth = function() { return this.layer.pixelWidth; }
xLayer.prototype.getHeight = function() { return this.layer.pixelHeight; }
xLayer.prototype.getzIndex = function() { return this.layer.zIndex; }
xLayer.prototype.isVisible = function() { return this.layer.visibility == "visible"; }
xLayer.prototype.clip = function(x1,y1, x2,y2)
{
this.layer.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")";
this.layer.pixelWidth=x2;
this.layer.pixelHeight=y2;
this.layer.overflow="hidden";
}
xLayer.prototype.addEventHandler = function(eventName, handler)
{
var xl = this;
this.content[eventName] = function()
{
var e = window.event;
e.cancelBubble = true;
return handler(xl, e.type, e.x, e.y,
e.button, e.keyCode,
e.shiftKey, e.ctrlKey, e.altKey);
}
}
/*** END IE ***/
}
else if (document.getElementById)
{
/*** W3C (NS 6) ***/
xLayer.prototype.moveTo = function(x,y)
{
this.layer.left = x+"px";
this.layer.top = y+"px";
}
xLayer.prototype.moveBy = function(x,y) { this.moveTo(this.getX()+x, this.getY()+y); }
xLayer.prototype.show = function() { this.layer.visibility = "visible"; }
xLayer.prototype.hide = function() { this.layer.visibility = "hidden"; }
xLayer.prototype.setzIndex = function(z) { this.layer.zIndex = z; }
xLayer.prototype.setBgColor = function(color) { this.layer.backgroundColor = color; }
xLayer.prototype.setBgImage = function(image) { this.layer.backgroundImage = image; }
xLayer.prototype.getX = function() { return parseInt(this.layer.left); }
xLayer.prototype.getY = function() { return parseInt(this.layer.top); }
xLayer.prototype.getWidth = function() { return parseInt(this.layer.width); }
xLayer.prototype.getHeight = function() { return parseInt(this.layer.height); }
xLayer.prototype.getzIndex = function() { return this.layer.zIndex; }
xLayer.prototype.isVisible = function() { return this.layer.visibility == "visible"; }
xLayer.prototype.clip = function(x1,y1, x2,y2)
{
this.layer.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")";
this.layer.width=x2 + "px";
this.layer.height=y2+ "px";
this.layer.overflow="hidden";
}
xLayer.prototype.addEventHandler = function(eventName, handler)
{
var xl = this;
this.content[eventName] = function(e)
{
e.cancelBubble = true;
return handler(xl, e.type, e.pageX, e.pageY,
e.button, e.keyCode,
e.shiftKey, e.ctrlKey, e.altKey);
}
}
xLayer.prototype.setContent = function(xHtml)
{
var newRange = document.createRange();
newRange.setStartBefore(this.content);
while (this.content.hasChildNodes())
this.content.removeChild(this.content.lastChild);
var strFrag = newRange.createContextualFragment(xHtml);
this.content.appendChild(strFrag);
}
} else
{
xLayer.prototype.moveTo = function(x,y) { }
xLayer.prototype.moveBy = function(x,y) { }
xLayer.prototype.show = function() { }
xLayer.prototype.hide = function() { }
xLayer.prototype.setzIndex = function(z) { }
xLayer.prototype.setBgColor = function(color) { }
xLayer.prototype.setBgImage = function(image) { }
xLayer.prototype.getX = function() { return 0; }
xLayer.prototype.getY = function() { return 0; }
xLayer.prototype.getWidth = function() { return 0; }
xLayer.prototype.getHeight = function() { return 0; }
xLayer.prototype.getzIndex = function() { return 0; }
xLayer.prototype.isVisible = function() { return false; }
xlayer.prototype.setContent = function(xHtml) { }
}
function xMouse()
{ this.X = 0;
this.Y = 0;
if(navigator.appName.indexOf("Netscape") != -1)
{
this.getMouseXY = function (evnt)
{
document.ml.X=evnt.pageX;
document.ml.Y=evnt.pageY;
}
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove = this.getMouseXY;
document.ml = this;
}
else if(document.all)
{
if(navigator.appVersion.indexOf("MSIE 5.") != -1)
this.getMouseXY = function ()
{
document.ml.X = event.x + document.body.scrollLeft;
document.ml.Y = event.y + document.body.scrollTop;
}
else
this.getMouseXY = function ()
{
document.ml.X = event.x;
document.ml.Y = event.y;
}
document.ml = this;
document.onmousemove = this.getMouseXY;
}
return(this);
}
var m = new xMouse();
var oneDeg=(2*Math.PI)/360;
/*** PINWHEEL TYPE 7 ***/
var Radius = 5;
var NumStars=32;
var NumSteps=32;
var StepAngle=(22.5)*oneDeg;
var StarObject=new Array();
var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
function dec2hex(dec)
{
return(hexDigit[dec>>4]+hexDigit[dec&&15]);
}
function hex2dec(hex)
{
return(parseInt(hex,16))
}
function CreateStar()
{
this.layer = new xLayer("X", 100, 100, 10);
this.currAngle = 0;
this.step = 0;
this.x = 100;
this.y = 100;
return (this);
}
/*** Choose a random pinwheel configuration ***/
function restart()
{
var num=Math.floor(Math.random()*4);
for(i=0;i<NumStars;i++)
StarObject[i].layer.hide();
if(num==0){
Radius = 1;
NumStars=32;
NumSteps=16;
StepAngle=(25)*oneDeg;
}
for(i=0 ; i<NumStars; i++)
{
var s=StarObject[i];
s.currAngle = (StepAngle*i);
s.step = (i%NumSteps);
s.x=m.X;
s.y=m.Y;
}
for(i=0;i<NumStars;i++)
StarObject[i].layer.show();
}
function start()
{
for(i=0 ; i<NumStars; i++)
{
StarObject[i]=new CreateStar();
StarObject[i].currAngle = (StepAngle*i);
StarObject[i].step = (i%NumSteps);
StarObject[i].layer.clip(0,0,2,2);
StarObject[i].layer.setBgColor("red");
}
for(i=0 ; i<NumStars ; i++)
StarObject[i].layer.show();
/*** Remove this if you only 1 type of pinwheel ***/
Rotate();
}
function changeColour(s)
{
var colour="";
r2= Math.floor(Math.random()*2)*255;
g2= Math.floor(Math.random()*2)*255;
b2= Math.floor(Math.random()*2)*255;
if(r2==0 && g2==0 && b2==0)
r2=255;
colour = "cc0066";
s.layer.setBgColor(colour);
s.x=m.X;
s.y=m.Y;
}
function Rotate()
{
var x;
var y;
for (i = 0 ; i < NumStars ; i++ ) {
var s=StarObject[i];
if(s.step==0)
changeColour(s);
var angle = s.currAngle;
var rad = s.step*Radius + 10;
x = s.x + rad*Math.cos(angle);
y = s.y + rad*Math.sin(angle);
s.layer.moveTo(x,y);
s.step = (s.step+1)%NumSteps;
}
setTimeout("Rotate()", 30);
}
function handle_resize()
{
if(document.layers)
start();
}
window.onresize=handle_resize;
//-->
</script>
<script type="text/javascript">function addEvent176(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false)}else if(obj.attachEvent){obj["e"+type+fn]=fn;obj[type+fn]=function(){obj["e"+type+fn](window.event)};obj.attachEvent("on"+type,obj[type+fn])}};addEvent176(window,'load',start);</script>