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

Visited times , Welcome to Data Mining Forum & Data Mining Expert & Data Mining Tools

一个可以拖动的聊天窗口层，兼容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/<a href="http://www.knowsky.com/article.asp?typeid=36">javascript</a>">
  <meta http-equiv="content-style-type" content="text/<a href="http://www.knowsky.com/article.asp?typeid=38">CSS</a>">
  <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>

[数据挖掘专家] [数据挖掘研究院] [数据挖掘论坛] [数据挖掘实验室]

上一篇：Dreamweaver CS3 Beta界面功能大曝光
下一篇：用FrongPage设计网页花样

最新评论共有 0 位网友发表了评论 , 查看所有评论

发表评论( 不能超过250字，需审核，请自觉遵守互联网相关政策法规。 )

数据挖掘网站导航	数据挖掘论坛导航
数据挖掘工具数据挖掘论坛 DataCruncher - Cognos MineSet - MathSoft Intelligent Miner - GainSmarts Sqlserver - SAS - Clementine CART - Weka - WizSoft NeuroShell - ModelQuest data mining tools - Darwin 数据挖掘交友数据挖掘博客	数据挖掘工具数据挖掘资源数据挖掘技术算法数据挖掘相关期刊、会议研究院联盟合作专区数据挖掘基础与相关技术数据挖掘厂商与就业数据挖掘研究者乐园知名厂商数据挖掘工具资料国内数据挖掘实验室 Foreign Data Mining Lab