javascript - 레이어 클래스 and 마우스 좌표

규리맘♡ 2011. 7. 7. 12:15

<html><head>
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-language" content="ko">
<title> [ . . . ] </title>
<script><!--
TKLayer=function(id,x,y,w,h){
this.init();
this.id=(id)?id:"TKLayer"+TKLayer.count++;
this.x=(x)?x:0;
this.y=(y)?y:0;
this.w=(w)?w:300;
this.h=(h)?h:300;
this.resizeTo(this.w, this.h);
this.moveTo(this.x, this.y);
};

TKLayer.count=0;
TKLayer.prototype.init=function(){
var t = document.createStyleSheet();
t.addRule(".TKLayerTray","position:absolute;top:0px;left:0px;font:normal 12px lucida console;background:#FF0099;padding:2px;border:1px dotted black;",1);
t.addRule(".TKLayerHead","font-weight:bold;color:white;padding:5px 1px 3px 5px;border-bottom:1px dotted transparent;",2);
t.addRule(".TKLayerBody","height:100%;line-height:120%;color:black;background:#FFFFFF;padding: 5px 5px 5px 10px;",3);
this.elm=document.createElement("div");
this.elm.appendChild( document.createElement("div") );
this.elm.appendChild( document.createElement("div") );
this.elm.className="TKLayerTray";
this.elm.children[0].className="TKLayerHead";
this.elm.children[1].className="TKLayerBody";
document.add=function(obj){
  document.body.appendChild(obj.elm);
};
this.elm.ondblclick=function(){
  this.style.visibility="hidden";
};
};
TKLayer.prototype.dragMe=function(b){
if(b){
this.elm.isDrag=false;
this.elm.dragX=null;
this.elm.dragY=null;
this.elm.onmousedown=function(){
   this.isDrag=true;
   this.dragX=event.offsetX;
   this.dragY=event.offsetY;
};
this.elm.onmouseup=function(){this.isDrag=false;};
this.elm.onmouseout=function(){this.isDrag=false;};
this.elm.onmousemove=function(){
  if (this.isDrag){
   this.style.left = event.clientX - this.dragX;
   this.style.top = event.clientY - this.dragY;

};
};
}else{
this.elm.isDrag=null;
this.elm.dragX=null;
this.elm.dragY=null;
this.elm.onmousedown=null;
this.elm.onmouseup=null;
this.elm.onmouseout=null;
this.elm.onmousemove=null;
}
};
TKLayer.prototype.show=function(b){
this.elm.style.visibility=(b)?'visible':'hidden';
};
TKLayer.prototype.resizeTo=function(w,h){
this.elm.style.width = this.w = w;
this.elm.style.height = this.h = h;
};
TKLayer.prototype.moveTo=function(x,y){
this.elm.style.left= this.x = x;
this.elm.style.top= this.y = y;
};
TKLayer.prototype.writeTitle=function(str){
this.elm.children[0].innerHTML = str;
};
TKLayer.prototype.write=function(str){
this.elm.children[1].innerHTML = str;
};

window.onload=function()
{
 my1 = new TKLayer();
 my1.writeTitle("Drag Me..");
 my1.write("100년만의 폭설... 눈치우러 갑시다...^^ <a href=# onclick='my1.dragMe(false)'>드래그해제</a>");
 my1.moveTo(500,300);
 my1.resizeTo(200,100);
 my1.dragMe(true);
 document.add(my1);

my2 = new TKLayer();
 my2.writeTitle("안녕하세요...");
 my2.write("안녕하세요... 재밌는 세상... 더블클릭하면 사라집니다...^^");
 my2.moveTo(10,10);
 my2.resizeTo(500,100);
 document.add(my2);

  mouseinfo = new TKLayer();
  mouseinfo.moveTo(100,100);
  mouseinfo.resizeTo(200,160);
  mouseinfo.writeTitle("마우스 좌표 정표");
  document.add(mouseinfo);
  //alert(my3.toString());

};
document.onmousemove=function(){
var e = event;
var x = e.x;
var y = e.y;
var cx = e.clientX;
var cy = e.clientY;
var ox = e.offsetX;
var oy = e.offsetY;
var sx = e.screenX;
var sy = e.screenY;
mouseinfo.write(
"event.x"+event.x+" "+
"event.y"+event.y+" "+
"event.clientx"+event.clientX+" "+
"event.clienty"+event.clientY+" "+
"event.offsetx"+event.offsetX+" "+
"event.offsety"+event.offsetY+" "+
"event.screenx"+event.screenX+" "+
"event.screeny"+event.screenY+" "
);
};
//--></script>
</head><body bgcolor=#CCCCCC>

</body></html>

저작자표시 (새창열림)