A javascript selector

 This is a selector,but there is a problem that it will show an error when you click the body quickly in IE. it's done in FF.i will modifiy it at spare time. If you have some advice,please let me know.

Thanks
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>^_^-Stefli's Selector</title>
  5. <style type="text/css">
  6. body {
  7.     margin: 0px;
  8.     padding: 0px;
  9. }
  10. #layer {
  11.     position:absolute; 
  12.     background:#efefef; 
  13.     width:400px; 
  14.     height:400px; 
  15.     top:0p; 
  16.     left:0px;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div id="layer"></div>
  22. <script type="text/javascript">
  23. var drag;
  24. function Class() {
  25.     this.id = 1;
  26.     this.x;
  27.     this.y;
  28.     this.obj;
  29.     
  30.     eval(this.obj + "=this");
  31.     this.initial = function() {
  32.         this.obj = document.createElement("DIV");
  33.         $("layer").appendChild(this.obj);
  34.         with(this.obj) {
  35.             id = this.id;
  36.             this.obj.style.position = "absolute";
  37.             this.obj.style.border = "1px solid #00f";
  38.             this.obj.style.lineHeight = "0px";
  39.             this.obj.style.display = "none";
  40.             thisthis.id = this.id + 1;
  41.         }
  42.     }
  43.     this.move = function(x, y) {
  44.         this.x = x;
  45.         this.y = y;
  46.         this.obj.style.left = x;
  47.         this.obj.style.top = y;
  48.     }
  49.     this.draw = function(e) {
  50.         this.obj.style.display = "";
  51.         var px = (e.clientX - this.x)>0?this.x:e.clientX;
  52.         var py = (e.clientY - this.y)>0?this.y:e.clientY;
  53.         if(e.clientX==this.x) {
  54.             this.obj.style.borderLeft = "0px";
  55.         } else {
  56.             this.obj.style.borderLeft = "1px solid #00f";
  57.         }
  58.         if(e.clientY==this.y) {
  59.             this.obj.style.borderTop = "0px";
  60.         } else {
  61.             this.obj.style.borderTop = "1px solid #00f";
  62.         }
  63.         this.obj.style.left = px;
  64.         this.obj.style.top = py;
  65.         this.obj.style.width = Math.abs(e.clientX - this.x);
  66.         this.obj.style.height =  Math.abs(e.clientY - this.y);
  67.     }
  68.     this.clear = function() {
  69.         $("layer").removeChild(this.obj);
  70.     }
  71.     this.initial();
  72. }
  73. function setup(e) {
  74.     drag = true;
  75.     a = new Class();
  76.     ee = e?e:window.event;
  77.     a.move(e.clientX, e.clientY);
  78. }
  79. function draw(e) {
  80.     ee = e?e:window.event;
  81.     if(drag) {
  82.         a.draw(e);
  83.     }
  84. }
  85. function clear() {
  86.     drag = false;
  87.     a.clear();
  88. }
  89. function $(id) {
  90.     return document.getElementById(id);
  91. }
  92. $("layer").onmousedown = setup;
  93. $("layer").onmousemove = draw;
  94. $("layer").onmouseup = clear;
  95. </script>
  96. </body>
  97. </html>

你可能感兴趣的:(A javascript selector)