스타일 1
스타일 2
스타일 3
스타일 4
스타일 5
스타일 6
스타일 7
스타일 8
스타일 9
스타일 10
스타일 11
<![CDATA[
www.tagkorea.pe.kr
마우스에 회전하며 따라다니면서 반짝거리는 효과
이 소스는 검은 색 배경에서 사용해야 멋있습니다~
스타일은 일정 시간마다 자동으로 변환됩니다.
★ 아래 소스는 <head> 와 </head> 사이에 넣어주시면 됩니다.
<script>
<!--
//LANGUAGE="JavaScript" SRC="../inc/xLayer_09.js"
var xLayerNo=0;
function xLayer(newLayer, x, y)
{
if(x==null)x=0;
if(y==null)y=0;
if(document.layers)
{
if(typeof newLayer == "string")
{
this.layer=new Layer(100);
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 + ";"
+ "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;"
+ "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; if(color==null)this.layer.background.src=null;}
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) {
event.clientX = event.pageX;
event.clientY = event.pageY;
event.button = event.which;
event.keyCode = event.which;
event.altKey =((event.modifiers & Event.ALT_MASK) != 0);
event.ctrlKey =((event.modifiers & Event.CONTROL_MASK) != 0);
event.shiftKey =((event.modifiers & Event.SHIFT_MASK) != 0);
return handler(xl, event);
}
}
/*** 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==null?'transparent':color; }
xLayer.prototype.setBgImage = function(image) { this.layer.backgroundImage = "url("+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.layerX = e.offsetX;
e.layerY = e.offsetY;
e.cancelBubble = true;
return handler(xl, e);
}
}
/*** 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==null?'transparent':color; }
xLayer.prototype.setBgImage = function(image) { this.layer.backgroundImage = "url("+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);
}
}
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) { }
}
//LANGUAGE="JavaScript" SRC="../inc/xMouse_09.js"
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(document.getElementById)
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);
}
//LANGUAGE="JavaScript" SRC="../inc/pinwheel2_09.js"
var theTimer=null;
var m = new xMouse();
var oneDeg=(2*Math.PI)/360;
/*** Pinwheel type 1 ***/
var Radius = 5;
var NumStars=32;
var NumSteps=16;
var StepAngle=(25)*oneDeg;
/*** Pinwheel type 2 ***/
//var Radius = 10;
//var NumStars=16;
//var NumSteps=8;
//var StepAngle=(22.5)*oneDeg;
/*** Pinwheel type 3 ***/
//var Radius = 5;
//var NumStars=16;
//var NumSteps=16;
//var StepAngle=(22.5)*oneDeg;
/*** Pinwheel type 4 ***/
//var Radius = 10;
//var NumStars=32;
//var NumSteps=16;
//var StepAngle=(11.25)*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);
}
function restart()
{
for(i=0;i<NumStars;i++)
{
StarObject[i].currAngle = (StepAngle*i);
StarObject[i].step = (i%NumSteps);
StarObject[i].x = m.X;
StarObject[i].y = m.Y;
StarObject[i].layer.moveTo(m.X, m.Y);
StarObject[i].layer.show();
}
}
/*** Choose a random pinwheel configuration ***/
function next_random()
{
var num=Math.floor(Math.random()*4);
for(i=0;i<NumStars;i++)
StarObject[i].layer.hide();
if(num==0){
Radius = 5;
NumStars=32;
NumSteps=16;
StepAngle=(25)*oneDeg;
}
else
if(num==1){
Radius = 10;
NumStars=16;
NumSteps=8;
StepAngle=(22.5)*oneDeg;
}
else
if(num==2){
Radius = 5;
NumStars=16;
NumSteps=16;
StepAngle=(22.5)*oneDeg;
}
else{
Radius = 10;
NumStars=32;
NumSteps=16;
StepAngle=(11.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;
}
restart();
theTimer=setTimeout("next_random()", 10000);
}
var ow ;
function start()
{
if(document.layers)
ow = outerWidth;
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 ***/
theTimer=setTimeout("next_random()", 10000);
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 = "#" + dec2hex(r2) + dec2hex(g2) + dec2hex(b2);
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)
if(outerWidth != ow)
location.reload();
}
window.onresize=handle_resize;
window.onload=start;
//Etc
function change(n)
{
if(theTimer != null)
{
clearTimeout(theTimer);
theTimer=null;
}
for(i=0;i<NumStars;i++)
StarObject[i].layer.hide();
switch(n)
{
case 0:
Radius = 1;
NumStars=180;
NumSteps=60;
StepAngle=(27)*oneDeg;
break;
case 1:
Radius = 5;
NumStars=128;
NumSteps=8;
StepAngle=(21)*oneDeg;
break;
case 2:
Radius = 5;
NumStars=128;
NumSteps=32;
StepAngle=(21)*oneDeg;
break;
case 3:
Radius = 1;
NumStars=128;
NumSteps=64;
StepAngle=(7)*oneDeg;
break;
case 4:
Radius = 1;
NumStars=128;
NumSteps=64;
StepAngle=(47)*oneDeg;
break;
case 5:
Radius = 5;
NumStars=128;
NumSteps=32;
StepAngle=(17)*oneDeg;
break;
case 6:
Radius = 5;
NumStars=127;
NumSteps=27;
StepAngle=(23)*oneDeg;
break;
case 7:
Radius = 5;
NumStars=132;
NumSteps=16;
StepAngle=(97)*oneDeg;
break;
case 8:
Radius = 5;
NumStars=96;
NumSteps=32;
StepAngle=(13)*oneDeg;
break;
case 9:
Radius = 10;
NumStars=128;
NumSteps=8;
StepAngle=(3)*oneDeg;
break;
case 10:
Radius = 10;
NumStars=128;
NumSteps=8;
StepAngle=(46)*oneDeg;
break;
}
for(i=StarObject.length ; 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");
}
restart();
}
// -->
</SCRIPT>
]]>