JavaScript模拟可展开、拖动与关闭的聊天窗口实例
用JavaScript实现的仿QQ聊天窗口，可以展开层、拖动层、关闭层，还可以简单发消息，很不错吧，而且代码也不多，适合新手研究，也比较实用，你可以在此基础上扩展很多JS+CSS应用。
<!--CTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt-->
<html>
<head>
<title>层展开、层拖动、层关闭</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="text/css"media="all"rel="stylesheet">
<!--
body{
text-align:left;
margin:0;
font:normal12pxVerdana,Arial;
background:#FFEEFF
}
form{
margin:0;
font:normal12pxVerdana,Arial;
}
table,input{
font:normal12pxVerdana,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:1pxsolid#003399;
background:#DCDCFF;
font-size:11px;
color:#3366FF;
cursor:move;
}
#ChatHeada:link,#ChatHeada:visited,{
font-size:14px;
font-weight:bold;
padding:03px
}
#ChatBody{
border:1pxsolid#003399;
border-top:none;
padding:2px;
}
#ChatContent{
height:200px;
padding:6px;
overflow-y:scroll;
word-break:break-all
}
#ChatBtn{
border-top:1pxsolid#003399;
padding:2px
}
-->
</style><scriptlanguage="javascript"type="text/javascript">
<!--
function$(d){returndocument.getElementById(d);}
functiongs(d){vart=$(d);if(t){returnt.style;}else{returnnull;}}
functiongs2(d,a){
if(d.currentStyle){
varcurVal=d.currentStyle[a]
}else{
varcurVal=document.defaultView.getComputedStyle(d,null)[a]
}
returncurVal;
}
functionChatHidden(){gs("ChatBody").display="none";}
functionChatShow(){gs("ChatBody").display="";}
functionChatClose(){gs("main").display="none";}
functionChatSend(obj){
varo=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("<inputtype='hidden'id='Q'value=''>");}
varn=500;
vardragok=false;
vary,x,d,dy,dx;
functionmove(e)
{
if(!e)e=window.event;
if(dragok){
d.style.left=dx+e.clientX-x+"px";
d.style.top=dy+e.clientY-y+"px";
returnfalse;
}
}
functiondown(e){
if(!e)e=window.event;
vartemp=(typeofe.target!="undefined")?e.target:e.srcElement;
if(temp.tagName!="HTML"|"BODY"&&temp.className!="dragclass"){
temp=(typeoftemp.parentNode!="undefined")?temp.parentNode:temp.parentElement;
}
if('TR'==temp.tagName){
temp=(typeoftemp.parentNode!="undefined")?temp.parentNode:temp.parentElement;
temp=(typeoftemp.parentNode!="undefined")?temp.parentNode:temp.parentElement;
temp=(typeoftemp.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;
returnfalse;
}
}
functionup(){
dragok=false;
document.onmousemove=null;
}
document.onmousedown=down;
document.onmouseup=up;
}
)();
}
-->
</script>
</head>
<body>
<divclass="dragclass"id="main"style="LEFT:588px;TOP:298px">
<divid="ChatHead"><aonclick="ChatHidden();"href="#">-</a>
<aonclick="ChatShow();"href="#">+</a>
<aonclick="ChatClose();"href="#">x</a></div>
<divid="ChatBody">
<divid="ChatContent">HI!Hello!Welcometowww.nhooo.com</div>
<divid="ChatBtn">
<formaction=""method="post"name="chat">
</form>
</div>
</div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。