JS+CSS打造可拖动的聊天窗口层

来源：Linuxdby.com 作者：Webmaster 时间：2007-06-05 点击： [收藏] [投稿]

一个可以拖动的聊天窗口层，兼容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" />
  
  </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>
</html><br />
              
              <br />
            <center>  
            <strong>  <font color="#0000FF">如果您对本文有任何疑问或者建议，请到讨论区发表您的意见:</font> 
            </strong><a href="http://bbs.linux-cn.com" target="_blank"><strong><font color="#FF0000">>> 
            论坛入口 <<</font></strong></a> <br>
            <br>
            <div class="articlepages"><a href='#'>上一页</a><strong>1</strong><a href='52720_2.html'>2</a> <a href='52720_2.html'>下一页</a> </div>

</center><br /><br />

上一篇：<a href='/html/website/JavaScript/20070605/52719.html'>在Javascript中使用正则表达式</a>    下一篇：<a href='/html/website/JavaScript/20070605/52721.html'>Js之软键盘实现(源码) </a> 
<br /><br />
<center>
【<a href="/plus/feedback.php?arcID=52720" title="文章评论" target="_blank">文章评论</a>】 
            【<a href="javascript:window.external.addFavorite('http://www.linux-cn.com/plus/view.php?aid=52720','JS+CSS打造可拖动的聊天窗口层|Linux中国')" title="收藏本文" target="_blank">收藏本文</a>】 
            【<a href="/plus/recommend.php?arcID=52720" title="推荐好友" target="_blank">推荐好友</a>】 
            【<a href="javascript:window.print();" title="打印本文" target="_self">打印本文</a>】 
            【<a href="/member/article_add.php" target="_blank">我要投稿</a>】 【<a href="http://bbs.linux-cn.com" target="_blank">论坛讨论</a>】</center>
              
              </div>
        </div> 
        
        <div class="articleadtop728"><script src='/plus/ad_js.php?aid=23' language='javascript'></script></div>
              <div class="title">更多相关文章</div>
			
                	<div class="relativearticle">·<a href='/html/website/JavaScript/20070605/52742.html'>用javascript+php随机显示图片</a></div><div class="relativearticle">·<a href='/html/website/JavaScript/20070605/52741.html'>限制文本字节数的JS源代码程序</a></div><div class="relativearticle">·<a href='/html/website/JavaScript/20070605/52740.html'>用来实现Web页面图片移动托拽的代码段</a></div><div class="relativearticle">·<a href='/html/website/JavaScript/20070605/52739.html'>开发跨浏览器JavaScript时要注意的问题</a></div><div class="relativearticle">·<a href='/html/website/JavaScript/20070605/52738.html'>javascript分页</a></div><div class="relativearticle">·<a href='/html/website/JavaScript/20070605/52737.html'>使用Javascript制作声音按钮</a></div><div class="relativearticle">·<a href='/html/website/JavaScript/20070605/52736.html'>JavaScript技巧:让网页自动穿上外套</a></div><div class="relativearticle">·<a href='/html/website/JavaScript/20070605/52735.html'>Javascript模拟的DOS窗口</a></div><div class="relativearticle">·<a href='/html/website/JavaScript/20070605/52734.html'>利用javascript从数据库取数据来实现CSDN首页图</a></div><div class="relativearticle">·<a href='/html/website/JavaScript/20070605/52733.html'>将js文件编译成动态链接库(dll)文件</a></div>
             
		  </div>
          
    
    </td>
    <td class="channelright">
    <div class="rightad250_250">
    <script src='/plus/ad_js.php?aid=19' language='javascript'></script>
    </div>
    <div class="suggestarticles">
         <div class="title">推荐文章</div>
         <div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070605/52626.html'>javascript应用：实现复选框全选/全</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8175.html'> javascript 的几种排序方法</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8121.html'> 面向对象的JavaScript编程</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070605/52711.html'>如何用javascript防止连打（双击） </a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8362.html'> 用JavaScript实现字符串切分功能</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070605/52705.html'>用javascript的ShowModalDialog()函</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8039.html'> JavaScript幻灯片效果</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070605/52540.html'>Javascript实例教程(7) 利用Javascr</a></div>
      </div>
      
       <div class="rightad250_300">
       <script src='/plus/ad_js.php?aid=20' language='javascript'></script>
       </div>
       
       <div class="randsuggest">
          <div class="title">精彩文章</div>
           <div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8152.html'> JavaScript高级应用：例外处理</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070605/52732.html'>document.onLoad的触发时间</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8101.html'> 一个简单的javascript菜单</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8264.html'> 延迟/定时/强制弹出窗口的ＪＳ代码</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8168.html'> JavaScript教程--从入门到精通(7)</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8114.html'> JavaScript对象与数组参考大全3</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8088.html'> 自定义右键菜单代码详解</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8263.html'> Javascript实现窗口最大化的严格定</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070605/52681.html'>FireFox 如何用Javascript 修改状态</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8208.html'> 使用Javascript创建XML文件</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070605/52630.html'>利用搜索引擎引用来高亮页面关键字</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8360.html'> JScript错误代码及相应解释</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8082.html'> 强制访问你的广告</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8262.html'> JavaScript实用的一些技巧</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070605/52706.html'>用Javascript轻松制作一套简单的抽</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8191.html'> 网页“状态栏”文字特殊效果全攻略</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8189.html'> 用JavaScript实现浏览器地震的效果</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8261.html'> Javascript控制显示表单个数</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8155.html'> 页面两侧对联广告(允许关闭)代码效</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8212.html'> 网页中相关事件的详细讲解和说明</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8303.html'> 网页中一些常见的问题与解决代码</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070605/52538.html'>Javascript实例教程(4) 探测浏览器</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070605/52720.html'>JS+CSS打造可拖动的聊天窗口层</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8108.html'> JavaScript基础实例:怎么样计算24</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070413/8065.html'> 使用Javascript制作行间颜色间隔</a></div><div class="suggestarticlestitle">·<a href='/html/website/JavaScript/20070605/52582.html'>图片下拉选择器的制作</a></div>
       </div>
       
       
    </td>
 </tr>
 </table>
<div class="bottomnav bigwidthwithborder">
<script type="text/javascript" language="javascript" src="/linuxcn/js/bottomnav.js"></script>
</div>
<div class="bottomcopyright bigwidth">
<a href='http://www.linux-cn.com' target='_blank'>Power by linux-cn.com</a> <a href="http://www.miibeian.gov.cn" target="_blank">粤ICP备05006655号</a> <script language="javascript" type="text/javascript" src="/linuxcn/js/allbottom.js"></script>
</div>
</body>
</html>