js+css打造可拖动的聊天窗口层_javascript教程-IDC资讯中心

一个可以拖动的聊天窗口层，兼容IE和FF：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml”> 
<head> 
 <meta http-equiv=”content-type” content=”text/html; charset=gb2312″> 
 <meta http-equiv=”content-script-type” content=”text/javascript”> 
 <meta http-equiv=”content-style-type” content=”text/css”> 
 <title>DoDi Chat v1.0 Beta</title> 
 <style rel=”stylesheet” type=”text/css” media=”all” /> 
 <!– 
 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 += “Akon说：”+o.value+” ”; 
 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 id=”main” class=”dragclass” style=”left:600px;top:300px;”> 
 <div id=”ChatHead”> 
 <a href=”#” onclick=”ChatHidden();”>-</a> 
 <a href=”#” onclick=”ChatShow();”>+</a> 
 <a href=”#” onclick=”ChatClose();”>x</a> 
 </div> 
 <div id=”ChatBody”> 
 <div id=”ChatContent”></div> 
 <div id=”ChatBtn”> 
 <form action=”” name=”chat” method=”post”> 
 <textarea name=”ChatValue” rows=”3″ style=”width:350px”></textarea> 
 <input name=”Submit” type=”button” value=”Chat” onclick=”ChatSend(this.form);” /> 
 </form> 
 </div> 
 </div> 
</div>
</body> 
</html>

js+css打造可拖动的聊天窗口层_javascript教程

相关推荐

热门标签

热门文章

分类目录