javascript实现淡蓝色的鼠标拖动选择框实例

这篇文章主要介绍了javascript实现淡蓝色的鼠标拖动选择框,可实现鼠标拖动出现淡蓝色选择框的效果,涉及javascript鼠标事件及样式的操作技巧,需要的朋友可以参考下

本文实例讲述了javascript实现淡蓝色的鼠标拖动选择框。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
5. <style type="text/css"> 
6. #rectBox 
7. { 
8. background:#CCFFFF; 
9. border:2px solid #0099FF; 
10. filter:alpha(opacity=30); 
11. opacity:0.3; 
12. position:absolute; 
13. } 
14. </style> 
15. <head> 
16. <title>一个鼠标选择框</title> 
17. <script type="text/javascript"> 
18. function Rect() 
19. { 
20. this.doc = document.documentElement; 
21. if(!this.doc) return; 
22. this.startX = ''; 
23. this.startY = ''; 
24. this.rect = null; 
25. rectSelf = this; 
26. } 
27. Rect.prototype.down = function(e) 
28. { 
29. var e = e?e:window.event; 
30. rectSelf.startX = e.clientX?e.clientX + document.body.scrollLeft:e.pageX; 
31. rectSelf.startY = e.clientY?e.clientY + document.body.scrollTop:e.pageY; 
32. rectSelf.showRect(true); 
33. } 
34. Rect.prototype.up = function(e) 
35. { 
36. rectSelf.rectBox.style.width = '0px'; 
37. rectSelf.rectBox.style.height = '0px'; 
38. rectSelf.showRect(false); 
39. } 
40. Rect.prototype.move = function(e) 
41. { 
42. if(rectSelf.rectBox) 
43. { 
44. var currentX = e.clientX?e.clientX + rectSelf.doc.scrollLeft:e.pageX; 
45. var currentY = e.clientY?e.clientY + rectSelf.doc.scrollTop:e.pageY; 
46. rectSelf.rectBox.style.width = Math.abs(currentX - rectSelf.startX) + 'px'; 
47. rectSelf.rectBox.style.height = Math.abs(currentY - rectSelf.startY) + 'px'; 
48. if(currentX - rectSelf.startX < 0) 
49. { 
50. rectSelf.rectBox.style.left = currentX + 'px'; 
51. } 
52. if(currentY - rectSelf.startY < 0) 
53. { 
54. rectSelf.rectBox.style.top = currentY + 'px'; 
55. } 
56. //document.title = "left:"+currentX + 'px '+"top:"+currentY + 'px '; 
57. } 
58. } 
59. Rect.prototype.showRect = function(bool) 
60. { 
61. if(bool) 
62. { 
63. if(!this.rectBox) 
64. { 
65. this.rectBox = document.createElement("div"); 
66. this.rectBox.id = "rectBox"; 
67. document.body.appendChild(this.rectBox); 
68. } 
69. this.rectBox.style.display = "block"; 
70. this.rectBox.style.left = this.startX + 'px'; 
71. this.rectBox.style.top = this.startY + 'px';  
72. this.addEventListener(this.doc , 'mousemove' , this.move); 
73. } 
74. else 
75. { 
76. if(this.rectBox) 
77. { 
78. this.rectBox.style.display = "none"; 
79. } 
80. this.removeEventListener(this.doc , 'mousemove' , this.move); 
81. } 
82. } 
83. Rect.prototype.addEventListener = function(o,e,l)  
84. { 
85. if (o.addEventListener) { 
86. o.addEventListener(e,l,false); 
87. } else if (o.attachEvent) { 
88. o.attachEvent('on'+e,function() { 
89. l(window.event); 
90. }); 
91. } 
92. } 
93. Rect.prototype.removeEventListener = function(o,e,l)  
94. { 
95. if (o.removeEventListener) { 
96. o.removeEventListener(e,l,false); 
97. } else if (o.detachEvent) { 
98. o.detachEvent('on'+e,function() { 
99. l(window.event); 
100. }); 
101. } 
102. } 
103. window.onload = function() 
104. { 
105. var oRect = new Rect(); 
106. oRect.addEventListener(oRect.doc , 'mousedown' , oRect.down); 
107. oRect.addEventListener(oRect.doc , 'mouseup' , oRect.up); 
108. } 
109. </script> 
110. </head> 
111. <body> 
112. <h1>拖动你的鼠标就会出现选择框</h1> 
113. </body> 
114. </html> 

希望本文所述对大家的javascript程序设计有所帮助。