Spirale

Ein netter Spiraleffekt verfolgt die Maus.

In den getesteten Browsern Internet Explorer, Opera und Firefox funktioniert dieser Effekt schön schnell 🙂

<!-- präsentiert von kostenlose-javascripts.de --> <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> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/mausverfolger/spirale/" target="_blank">kostenlose-javascripts.de</a><br /> <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> <!-- präsentiert von kostenlose-javascripts.de -->