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

用JavaScript实现的仿QQ聊天窗口，可以展开层、拖动层、关闭层，还可以简单发消息，很不错吧，而且代码也不多，适合新手研究，也比较实用，你可以在此基础上扩展很多JS+CSS应用。
<！--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--><html><head><title>层展开、层拖动、层关闭</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css" media="all" rel="stylesheet"> <！-- body {text-align:left;margin:0;font:normal 12px Verdana, Arial;background:#FFEEFF } form {margin:0;font:normal 12px Verdana, Arial; } table,input {font:normal 12px Verdana, Arial; } a:link,a:visited{text-decoration:none;color:#333333; } a:hover{text-decoration:none;color:#FF6600 } #main {width:400px;position:absolute;left:600px;top:100px;background:#EFEFFF;text-align:left;filter:Alpha（opacity=90） } #ChatHead {text-align:right;padding:3px;border:1px solid #003399;background:#DCDCFF;font-size:11px;color:#3366FF;cursor:move; } #ChatHead a:link,#ChatHead a:visited, {font-size:14px;font-weight:bold;padding:0 3px } #ChatBody {border:1px solid #003399;border-top:none;padding:2px; } #ChatContent {height:200px;padding:6px;overflow-y:scroll;word-break: break-all } #ChatBtn {border-top:1px solid #003399;padding:2px } --> </style><script language="javascript" type="text/javascript"> <！-- function $（d）{return document.getElementById（d）;} function gs（d）{var t=$（d）;if （t）{return t.style;}else{return null;}} function gs2（d,a）{if （d.currentStyle）{var curVal=d.currentStyle[a]}else{var curVal=document.defaultView.getComputedStyle（d, null）[a]} return curVal; } function ChatHidden（）{gs（"ChatBody"）.display = "none";} function ChatShow（）{gs（"ChatBody"）.display = "";} function ChatClose（）{gs（"main"）.display = "none";} function ChatSend（obj）{var o = obj.ChatValue;if （o.value.length>0）{ $（"ChatContent"）.innerHTML += "<strong>Akon说：</strong>"+o.value+"<br/>"; o.value="";} } if （document.getElementById）{（ function（）{if （window.opera）{ document.write（"<input type="hidden" id="Q" value=" ">"）; }var n = 500;var dragok = false;var y,x,d,dy,dx;function move（e）{ if （！e） e = window.event; if （dragok）{d.style.left = dx + e.clientX - x + "px";d.style.top = dy + e.clientY - y + "px";return false; }}function down（e）{ if （！e） e = window.event; var temp = （typeof e.target ！= "undefined"）?e.target:e.srcElement; if （temp.tagName ！= "HTML"|"BODY" && temp.className ！= "dragclass"）{temp = （typeof temp.parentNode ！= "undefined"）?temp.parentNode:temp.parentElement; } if（"TR"==temp.tagName）{temp = （typeof temp.parentNode ！= "undefined"）?temp.parentNode:temp.parentElement;temp = （typeof temp.parentNode ！= "undefined"）?temp.parentNode:temp.parentElement;temp = （typeof temp.parentNode ！= "undefined"）?temp.parentNode:temp.parentElement; } if （temp.className == "dragclass"）{if （window.opera）{ document.getElementById（"Q"）.focus（）; }dragok = true;temp.style.zIndex = n++;d = temp;dx = parseInt（gs2（temp,"left"））|0;dy = parseInt（gs2（temp,"top"））|0;x = e.clientX;y = e.clientY;document.onmousemove = move;return false; }}function up（）{ dragok = false; document.onmousemove = null;}document.onmousedown = down;document.onmouseup = up; }）（）; } --> </script></head><body><div class="dragclass" id="main" style="LEFT: 588px; TOP: 298px"><div id="ChatHead"><a onclick="ChatHidden（）;" href="#">-</a><a onclick="ChatShow（）;" href="#">+</a><a onclick="ChatClose（）;" href="#">x</a> </div><div id="ChatBody"><div id="ChatContent">HI！ Hello ！ Welcome to www.jb51.net</div><div id="ChatBtn"><form action="" method="post" name="chat"></form></div></div></div></body></html>
希望本文所述对大家的javascript程序设计有所帮助。