职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 1688|回复: 0

JS+CSS打造可拖动的聊天窗口层(兼容)

[复制链接]
云儿飘飘 发表于 2007-8-14 10:15 | 显示全部楼层 |阅读模式
<!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 += \"<strong>Akon说:</strong>\"+o.value+\"<br/>\";
   o.value=&#39;&#39;;
  }
}

if (document.getElementById){
  (
   function(){
    if (window.opera){ document.write(\"<input type=&#39;hidden&#39; id=&#39;Q&#39; value=&#39; &#39;>\"); }
   
    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(&#39;TR&#39;==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>
   [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-5-3 02:05 , Processed in 0.130079 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表