CSDN博客

img stefli

A javascript selector

发表于2008/9/28 17:39:00  558人阅读

 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>
0 0

相关博文

我的热门文章

img
取 消
img