熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

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

2013-11-15 11:48:06  來源: JSP教程 

  <!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd>
<html xmlns=>
<head>
  <meta httpequiv=contenttype content=text/html; charset=gb>
  <meta httpequiv=contentscripttype content=text/javascript>
  <meta httpequiv=contentstyletype content=text/css>
  <title>DoDi Chat v Beta</title>
  <style rel=stylesheet type=text/css media=all />
  <!
  body {
    textalign:left;
    margin:;
    font:normal px Verdana Arial;
    background:#FFEEFF
  }
  form {
    margin:;
    font:normal px Verdana Arial;
  }
  tableinput {
    font:normal px Verdana Arial;
  }
  a:linka:visited{
    textdecoration:none;
    color:#;
  }
  a:hover{
    textdecoration:none;
    color:#FF
  }
  #main {
    width:px;
    position:absolute;
    left:px;
    top:px;
    background:#EFEFFF;
    textalign:left;
    filter:Alpha(opacity=)
  }
  #ChatHead {
    textalign:right;
    padding:px;
    border:px solid #;
    background:#DCDCFF;
    fontsize:px;
    color:#FF;
    cursor:move;
  }
  #ChatHead a:link#ChatHead a:visited {
    fontsize:px;
    fontweight:bold;
    padding: px
  }
  #ChatBody {
    border:px solid #;
    bordertop:none;
    padding:px;
  }
  #ChatContent {
    height:px;
    padding:px;
    overflowy:scroll;
    wordbreak: breakall
  }
  #ChatBtn {
    bordertop:px solid #;
    padding:px
  }
  >
  </style>
  <script language=javascript type=text/javascript>
  <!
  function $(d){return documentgetElementById(d);}
  function gs(d){var t=$(d);if (t){return tstyle;}else{return null;}}
  function gs(da){
    if (dcurrentStyle){
      var curVal=dcurrentStyle[a]
    }else{
      var curVal=documentdefaultViewgetComputedStyle(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 = objChatValue;
    if (ovaluelength>){
      $(ChatContent)innerHTML += <strong>Akon說</strong>+ovalue+<br/>;
      ovalue=;
    }
  }

  if  (documentgetElementById){
    (
      function(){
        if (windowopera){ documentwrite(<input type=hidden id=Q value= >); }
     
        var n = ;
        var dragok = false;
        var yxddydx;
       
        function move(e)
        {
          if (!e) e = windowevent;
          if (dragok){
            dstyleleft = dx + eclientX x + px;
            dstyletop  = dy + eclientY y + px;
            return false;
          }
        }
       
        function down(e){
          if (!e) e = windowevent;
          var temp = (typeof etarget != undefined)?etarget:esrcElement;
          if (temptagName != HTML|BODY && tempclassName != dragclass){
            temp = (typeof tempparentNode != undefined)?tempparentNode:tempparentElement;
          }
          if(TR==temptagName){
            temp = (typeof tempparentNode != undefined)?tempparentNode:tempparentElement;
            temp = (typeof tempparentNode != undefined)?tempparentNode:tempparentElement;
            temp = (typeof tempparentNode != undefined)?tempparentNode:tempparentElement;
          }
       
          if (tempclassName == dragclass){
            if (windowopera){ documentgetElementById(Q)focus(); }
            dragok = true;
            tempstylezIndex = n++;
            d = temp;
            dx = parseInt(gs(templeft))|;
            dy = parseInt(gs(temptop))|;
            x = eclientX;
            y = eclientY;
            documentonmousemove = move;
            return false;
          }
        }
       
        function up(){
          dragok = false;
          documentonmousemove = null;
        }
       
        documentonmousedown = down;
        documentonmouseup = up;
     
      }
    )();
  }
  >
  </script>
</head>

  <body>
<div id=main class=dragclass >
  <div id=ChatHead>
    <a # onclick=ChatHidden();></a>
    <a # onclick=ChatShow();>+</a>
    <a # 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= ></textarea>
      <input name=Submit type=button value=Chat onclick=ChatSend(thisform); />
      </form>
    </div>
  </div>
</div>

  </body>
</html>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19651.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.