一个类似csdn聊天窗口的div+css+js实现(带QQ客服,可伸缩可拖拽可搁置)

<div id="divStay"></div> <div id="divStayTopleft"> <table cellspacing="0" cellpadding="0" width="113" border="0"> <tr> <td colspan="3"><img height="34" src="images/qq/qq_top.gif" width="113" usemap="#clickarea" border="0"/><map id="clickarea"><area shape="circle" coords="91,18,10" onclick="CloseQQ(event)" onmouseover="changeCursor(this,0)" onmouseout="changeCursor(this,1)"></map></td> </tr> <tr> <td width="6"><img height="120" src="images/qq/qq_life.gif" width="6"></td> <td valign="top" width="100" background="images/qq/qq_bg.gif"> <table cellspacing="0" cellpadding="0" width="100" align="center" border="0"> <tr> <td height="30"> <table cellspacing="0" cellpadding="0" width="100" border="0"> <tr> <td> <img height="13" src="images/qq/qq_ico1.gif" width="16"> <span class="font_12"><span style="font-size: 9pt">客户服务</span></span> </td> </tr> </table> </td> </tr> <tr> <td> <table border="0" width="100%" cellpadding="2" id="table1"> <tr> <td width="15" valign="top" height="23"> <img border="0" src="images/qq/qq_v01.gif" width="16" height="16"> </td> <td valign="bottom"> <a target='blank' href='tencent://message/?uin=345889543&Site=翱天电气科技&Menu=yes'> <img border='0' SRC='images/qq/talk.gif' alt='[翱天电气科技]'> </a> </td> </tr> </table> </td> </tr> <tr> <td> <table border="0" width="100%" cellpadding="2" id="table3"> <tr> <td width="15" valign="top" height="23"> <img border="0" src="images/qq/qq_n01.gif" width="16" height="16"> </td> <td valign="bottom"> <a target='blank' href='tencent://message/?uin=345889543&Site=翱天电气科技&Menu=yes'> <img border='0' SRC='images/qq/message.gif' alt='[翱天电气科技]'> </a> </td> </tr> </table> </td> </tr> <tr> <td> <table border="0" width="100%" cellpadding="2" id="table2"> <tr> <td width="15" valign="top" height="23"> <img border="0" src="images/qq/qq_n01.gif" width="16" height="16"> </td> <td valign="bottom"> <a href="javascript:void(0)" onclick="startChat()"> <img border='0' SRC='images/qq/chat.gif' alt='[翱天电气科技]'> </a> </td> </tr> </table> </td> </tr> </table> </td> <td width="7"><img height="120" src="images/qq/qq_right.gif" width="7"></td> </tr> <tr> <td colspan="3"><img height="30" src="images/qq/qq_bottom1.gif" width="113"></td> </tr> <tr> <td colspan="3"><img height="33" src="images/qq/qq_logo.gif" width="113"></td> </tr> </table> </div> <div id="main"> <div id="ChatHead"> <span id="headMsg">【在线聊吧】</span> <marquee id="mar" direction="left" onmouseover="this.stop();this.style.cursor='hand';" onmouseout="this.start()" scrollDelay='300'> 欢迎使用翱天电气科技网页聊天系统! </marquee>&nbsp; <img id="winState" border='0' height="15" width="15" src='images/qq/mini.gif' alt='[翱天电气科技]' onclick="changState(this);" onmouseover="this.style.cursor='hand'"/> </div> <div id="ChatBody"> <div id="ChatContent"></div> <div id="ChatBtn"> <form action="" name="chat" method="post"> <textarea name="ChatValue" rows="3" cols="52"></textarea><br/> <img border='0' SRC='images/qq/send.gif' alt='[翱天电气科技]' onclick="ChatSend(this.parentNode);" onmouseover="this.style.cursor='hand'"/> </form> </div> </div> </div> <div id="divPageMask"></div> <div id="maskWin"> <div id="maskHead">请输入您的昵称</div> <div id="maskBody"> <center><br/><br/> <label>昵称:</label><input id="nickName" type="text"/><br/><br/> <input type="button" id="msgbox_button" onclick="Mask.Event('yes',callback);" value="确定"/> <input type="button" id="msgbox_button2" onclick="Mask.Event('no',callback);" value="取消"/> </center> </div> </div> <style type="text/css"> a:link,a:visited{ text-decoration:none; color:#333333; } a:hover{ text-decoration:none; color:#FF6600 } #divStay,#divStayTopleft{ position: absolute; z-index:10; } #mar{ width : 250 ; font-size:15px; background-color:#ffffff; } #headMsg { text-align:left; font-size:16px; font-weight:bold; font-family:"华文新魏"; color:#009933; } #main { position: absolute; right: 0px; bottom: 0px; height: 0px; width: 400px; background-color: #ffffff; padding: 1px; overflow:hidden; display:none; font-size:12px; z-index:10; } #main form { margin:0; font:normal 12px Verdana, Arial; } #main table,input { font:normal 12px Verdana, Arial; } #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 } #divPageMask{ background-color:#000000; filter:alpha(opacity=50); left:0px; position:absolute; top:0px; z-index:30; } #maskWin{ background-color:#EEEEEE; position: absolute; left:0px;top:-300px; z-index:50; width:300px; height:150px; } #maskHead{ background-color: #B1CDF3; height:25px; position:relative; font-size:14px; line-height:25px; padding-left:10px; border-bottom:1px solid #000; } #maskBody{ text-align:center; clear:both; height:28px; } #msgbox_button,#msgbox_button2{ background-color: #B1CDF3; border:1px solid #003366; font-size:12px; line-height:20px; height:21px; } </style> <script type="text/javascript"> //*****************************Begin:工具函数*************************************// //判断浏览器类型 var isIE = (document.all) ? true : false; //定义$(id)函数 var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; //定义类函数 var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } //定义子函数 var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } } //绑定函数 var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } //绑定函数监听器 var BindAsEventListener = function(object, fun) { return function(event) { return fun.call(object, (event || window.event)); } } //当前样式 var CurrentStyle = function(element) { return element.currentStyle || document.defaultView.getComputedStyle(element, null); } //添加事件处理函数 function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if(oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } }; //移除事件处理函数 function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent