javascript实现可拖动变色并关闭层窗口实例

这篇文章主要介绍了javascript实现可拖动变色并关闭层窗口的方法,涉及javascript操作层的样式与属性的相关技巧,需要的朋友可以参考下

本文实例讲述了javascript实现可拖动变色并关闭层窗口的方法。分享给大家供大家参考。具体分析如下：

这是一款基于javascript+CSS实现层拖动的代码，不同的是它在拖动的时候窗口会变色，使操作体验更好一些，你可以运行代码查看效果。它还可以显示/隐藏或关闭打开的效果，没事的时候推敲一下

1. <html> 
2. <head> 
3. <title>拖动窗口</title> 
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
5. <style type='text/css'> 
6. <!-- 
7. body{font-size:12px;} 
8. a:visited{text-decoration:none;color:slategray;} 
9. a:hover{text-decoration:underline;color:slategray;} 
10. a:link{text-decoration:none;color:slategray;} 
11. --> 
12. </style> 
13. <script language=JScript> 
14. <!-- 
15. var x0=0,y0=0,x1=0,y1=0; 
16. var offx=6,offy=6; 
17. var moveable=false; 
18. var hover='orange',normal='#336699';//color; 
19. var index=10000;//z-index; 
20. //开始拖动; 
21. function startDrag(obj) 
22. { 
23. if(event.button==1) 
24. { 
25. //锁定标题栏; 
26. obj.setCapture(); 
27. //定义对象; 
28. var win = obj.parentNode; 
29. var sha = win.nextSibling; 
30. //记录鼠标和层位置; 
31. x0 = event.clientX; 
32. y0 = event.clientY; 
33. x1 = parseInt(win.style.left); 
34. y1 = parseInt(win.style.top); 
35. //记录颜色; 
36. normal = obj.style.backgroundColor; 
37. //改变风格; 
38. obj.style.backgroundColor = hover; 
39. win.style.borderColor = hover; 
40. obj.nextSibling.style.color = hover; 
41. sha.style.left = x1 + offx; 
42. sha.style.top = y1 + offy; 
43. moveable = true; 
44. } 
45. } 
46. //拖动; 
47. function drag(obj) 
48. { 
49. if(moveable) 
50. { 
51. var win = obj.parentNode; 
52. var sha = win.nextSibling; 
53. win.style.left = x1 + event.clientX - x0; 
54. win.style.top = y1 + event.clientY - y0; 
55. sha.style.left = parseInt(win.style.left) + offx; 
56. sha.style.top = parseInt(win.style.top) + offy; 
57. } 
58. } 
59. //停止拖动; 
60. function stopDrag(obj) 
61. { 
62. if(moveable) 
63. { 
64. var win = obj.parentNode; 
65. var sha = win.nextSibling; 
66. var msg = obj.nextSibling; 
67. win.style.borderColor = normal; 
68. obj.style.backgroundColor = normal; 
69. msg.style.color = normal; 
70. sha.style.left = obj.parentNode.style.left; 
71. sha.style.top = obj.parentNode.style.top; 
72. obj.releaseCapture(); 
73. moveable = false; 
74. } 
75. } 
76. //获得焦点; 
77. function getFocus(obj) 
78. { 
79. if(obj.style.zIndex!=index) 
80. { 
81. index = index + 2; 
82. var idx = index; 
83. obj.style.zIndex=idx; 
84. obj.nextSibling.style.zIndex=idx-1; 
85. } 
86. } 
87. //最小化; 
88. function min(obj) 
89. { 
90. var win = obj.parentNode.parentNode; 
91. var sha = win.nextSibling; 
92. var tit = obj.parentNode; 
93. var msg = tit.nextSibling; 
94. var flg = msg.style.display=="none"; 
95. if(flg) 
96. { 
97. win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2; 
98. sha.style.height = win.style.height; 
99. msg.style.display = "block"; 
100. obj.innerHTML = "0"; 
101. } 
102. else 
103. { 
104. win.style.height = parseInt(tit.style.height) + 2*2; 
105. sha.style.height = win.style.height; 
106. obj.innerHTML = "2"; 
107. msg.style.display = "none"; 
108. } 
109. } 
110. //创建一个对象; 
111. function xWin(id,w,h,l,t,tit,msg) 
112. { 
113. index = index+2; 
114. this.id = id; 
115. this.width = w; 
116. this.height = h; 
117. this.left = l; 
118. this.top = t; 
119. this.zIndex = index; 
120. this.title = tit; 
121. this.message = msg; 
122. this.obj = null; 
123. this.bulid = bulid; 
124. this.bulid(); 
125. } 
126. //初始化; 
127. function bulid() 
128. { 
129. var str = "" 
130. + "<div id=xMsg" + this.id + " " 
131. + "style='" 
132. + "z-index:" + this.zIndex + ";" 
133. + "width:" + this.width + ";" 
134. + "height:" + this.height + ";" 
135. + "left:" + this.left + ";" 
136. + "top:" + this.top + ";" 
137. + "background-color:" + normal + ";" 
138. + "color:" + normal + ";" 
139. + "font-size:8pt;" 
140. + "font-family:Tahoma;" 
141. + "position:absolute;" 
142. + "cursor:default;" 
143. + "border:2px solid " + normal + ";" 
144. + "' " 
145. + "onmousedown='getFocus(this)'>" 
146. + "<div " 
147. + "style='" 
148. + "background-color:" + normal + ";" 
149. + "width:" + (this.width-2*2) + ";" 
150. + "height:20;" 
151. + "color:white;" 
152. + "' " 
153. + "onmousedown='startDrag(this)' " 
154. + "onmouseup='stopDrag(this)' " 
155. + "onmousemove='drag(this)' " 
156. + "ondblclick='min(this.childNodes[1])'" 
157. + ">" 
158. + "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>" 
159. + "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>" 
160. + "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='ShowHide(/""+this.id+"/",null)'>r</span>" 
161. + "</div>" 
162. + "<div style='" 
163. + "width:100%;" 
164. + "height:" + (this.height-20-4) + ";" 
165. + "background-color:white;" 
166. + "line-height:14px;" 
167. + "word-break:break-all;" 
168. + "padding:3px;" 
169. + "'>" + this.message + "</div>" 
170. + "</div>" 
171. + "<div id=xMsg" + this.id + "bg style='" 
172. + "width:" + this.width + ";" 
173. + "height:" + this.height + ";" 
174. + "top:" + this.top + ";" 
175. + "left:" + this.left + ";" 
176. + "z-index:" + (this.zIndex-1) + ";" 
177. + "position:absolute;" 
178. + "background-color:black;" 
179. + "filter:alpha(opacity=40);" 
180. + "'></div>"; 
181. document.body.insertAdjacentHTML("beforeEnd",str); 
182. } 
183. //显示隐藏窗口 
184. function ShowHide(id,dis){ 
185. var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis 
186. document.getElementById("xMsg"+id).style.display = bdisplay; 
187. document.getElementById("xMsg"+id+"bg").style.display = bdisplay; 
188. } 
189. //--> 
190. </script> 
191. <script language='JScript'> 
192. <!-- 
193. function initialize() 
194. { 
195. var a = new xWin("1",160,200,200,200,"窗口1","xWin Demo"); 
196. var b = new xWin("2",240,200,100,100,"窗口2","Welcome");  
197. var c = new xWin("3",200,160,250,50,"窗口3","Copyright"); 
198. ShowHide("1","none");//隐藏窗口1 
199. } 
200. window.onload = initialize; 
201. //--> 
202. </script> 
203. </head> 
204. <base target="_blank"> 
205. <body onselectstart='return false' oncontextmenu='return false' > 
206. <a onclick="ShowHide('1',null);return false;" href="">Windows 1</a> 
207. <a onclick="ShowHide('2',null);return false;" href="">Windows 2</a> 
208. <a onclick="ShowHide('3',null);return false;" href="">Windows 3</a> 
209. </body> 
210. </html> 

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