JavaScript模拟可展开、拖动与关闭的聊天窗口实例

这篇文章主要介绍了JavaScript模拟可展开、拖动与关闭的聊天窗口,实例分析了javascript实现可拖动的div层相关技巧,非常具有实用价值,需要的朋友可以参考下

用JavaScript实现的仿QQ聊天窗口，可以展开层、拖动层、关闭层，还可以简单发消息，很不错吧，而且代码也不多，适合新手研究，也比较实用，你可以在此基础上扩展很多JS+CSS应用。

1. <!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> 
3. <html> 
4. <head> 
5. <title>层展开、层拖动、层关闭</title> 
6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
7. <style type="text/css" media="all" rel="stylesheet"> 
8. <!-- 
9. body { 
10. text-align:left; 
11. margin:0; 
12. font:normal 12px Verdana, Arial; 
13. background:#FFEEFF 
14. } 
15. form { 
16. margin:0; 
17. font:normal 12px Verdana, Arial; 
18. } 
19. table,input { 
20. font:normal 12px Verdana, Arial; 
21. } 
22. a:link,a:visited{ 
23. text-decoration:none; 
24. color:#333333; 
25. } 
26. a:hover{ 
27. text-decoration:none; 
28. color:#FF6600 
29. } 
30. #main { 
31. width:400px; 
32. position:absolute; 
33. left:600px; 
34. top:100px; 
35. background:#EFEFFF; 
36. text-align:left; 
37. filter:Alpha(opacity=90) 
38. } 
39. #ChatHead { 
40. text-align:right; 
41. padding:3px; 
42. border:1px solid #003399; 
43. background:#DCDCFF; 
44. font-size:11px; 
45. color:#3366FF; 
46. cursor:move; 
47. } 
48. #ChatHead a:link,#ChatHead a:visited, { 
49. font-size:14px; 
50. font-weight:bold; 
51. padding:0 3px 
52. } 
53. #ChatBody { 
54. border:1px solid #003399; 
55. border-top:none; 
56. padding:2px; 
57. } 
58. #ChatContent { 
59. height:200px; 
60. padding:6px; 
61. overflow-y:scroll; 
62. word-break: break-all 
63. } 
64. #ChatBtn { 
65. border-top:1px solid #003399; 
66. padding:2px 
67. } 
68. --> 
69. </style><script language="javascript" type="text/javascript"> 
70. <!-- 
71. function $(d){return document.getElementById(d);} 
72. function gs(d){var t=$(d);if (t){return t.style;}else{return null;}} 
73. function gs2(d,a){ 
74. if (d.currentStyle){  
75. var curVal=d.currentStyle[a] 
76. }else{  
77. var curVal=document.defaultView.getComputedStyle(d, null)[a] 
78. }  
79. return curVal; 
80. } 
81. function ChatHidden(){gs("ChatBody").display = "none";} 
82. function ChatShow(){gs("ChatBody").display = "";} 
83. function ChatClose(){gs("main").display = "none";} 
84. function ChatSend(obj){ 
85. var o = obj.ChatValue; 
86. if (o.value.length>0){ 
87. $("ChatContent").innerHTML += "<strong>Akon说：</strong>"+o.value+"<br/>"; 
88. o.value=''; 
89. } 
90. } 
91. if (document.getElementById){ 
92. ( 
93. function(){ 
94. if (window.opera){ document.write("<input type='hidden' id='Q' value=' '>"); } 
95. var n = 500; 
96. var dragok = false; 
97. var y,x,d,dy,dx; 
98. function move(e) 
99. { 
100. if (!e) e = window.event; 
101. if (dragok){ 
102. d.style.left = dx + e.clientX - x + "px"; 
103. d.style.top = dy + e.clientY - y + "px"; 
104. return false; 
105. } 
106. } 
107. function down(e){ 
108. if (!e) e = window.event; 
109. var temp = (typeof e.target != "undefined")?e.target:e.srcElement; 
110. if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){ 
111. temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
112. } 
113. if('TR'==temp.tagName){ 
114. temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
115. temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
116. temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
117. } 
118. if (temp.className == "dragclass"){ 
119. if (window.opera){ document.getElementById("Q").focus(); } 
120. dragok = true; 
121. temp.style.zIndex = n++; 
122. d = temp; 
123. dx = parseInt(gs2(temp,"left"))|0; 
124. dy = parseInt(gs2(temp,"top"))|0; 
125. x = e.clientX; 
126. y = e.clientY; 
127. document.onmousemove = move; 
128. return false; 
129. } 
130. } 
131. function up(){ 
132. dragok = false; 
133. document.onmousemove = null; 
134. } 
135. document.onmousedown = down; 
136. document.onmouseup = up; 
137. } 
138. )(); 
139. } 
140. --> 
141. </script> 
142. </head> 
143. <body> 
144. <div class="dragclass" id="main" style="LEFT: 588px; TOP: 298px"> 
145. <div id="ChatHead"><a onclick="ChatHidden();" href="#">-</a> 
146. <a onclick="ChatShow();" href="#">+</a> 
147. <a onclick="ChatClose();" href="#">x</a> </div> 
148. <div id="ChatBody"> 
149. <div id="ChatContent">HI! Hello ! Welcome to www.vevb.com</div> 
150. <div id="ChatBtn"> 
151. <form action="" method="post" name="chat"> 
152. </form> 
153. </div> 
154. </div> 
155. </div> 
156. </body> 
157. </html> 

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