JavaScript模擬可展開、拖曳與關閉的聊天視窗實例

首頁

web前端

js教程

JavaScript模擬可展開、拖曳與關閉的聊天視窗實例_javascript技巧

May 16, 2016 pm 03:59 PM

javascript 關閉展開拖曳模擬

用JavaScript實現的仿QQ聊天窗口，可以展開層、拖曳層、關閉層，還可以簡單發訊息，很不錯吧，而且程式碼也不多，適合新手研究，也比較實用，你可以在此基礎上擴展很多JS CSS應用。

&lt;!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;层展开、层拖动、层关闭&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;style type="text/css" media="all" rel="stylesheet"&gt;
 &lt;!--
 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
 }
 --&gt;
 &lt;/style&gt;&lt;script language="javascript" type="text/javascript"&gt;
 &lt;!--
 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&gt;0){
   $("ChatContent").innerHTML += "&lt;strong&gt;Akon说：&lt;/strong&gt;"+o.value+"&lt;br/&gt;";
   o.value='';
  }
 }
 if (document.getElementById){
  (
   function(){
    if (window.opera){ document.write("&lt;input type='hidden' id='Q' value=' '&gt;"); }
    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")&#63;e.target:e.srcElement;
     if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){
      temp = (typeof temp.parentNode != "undefined")&#63;temp.parentNode:temp.parentElement;
     }
     if('TR'==temp.tagName){
      temp = (typeof temp.parentNode != "undefined")&#63;temp.parentNode:temp.parentElement;
      temp = (typeof temp.parentNode != "undefined")&#63;temp.parentNode:temp.parentElement;
      temp = (typeof temp.parentNode != "undefined")&#63;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;
   }
  )();
 }
 --&gt;
 &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="dragclass" id="main" style="LEFT: 588px; TOP: 298px"&gt;
&lt;div id="ChatHead"&gt;&lt;a onclick="ChatHidden();" href="#"&gt;-&lt;/a&gt;
&lt;a onclick="ChatShow();" href="#"&gt;+&lt;/a&gt;
&lt;a onclick="ChatClose();" href="#"&gt;x&lt;/a&gt; &lt;/div&gt;
&lt;div id="ChatBody"&gt;
&lt;div id="ChatContent"&gt;HI! Hello ! Welcome to www.jb51.net&lt;/div&gt;
&lt;div id="ChatBtn"&gt;
&lt;form action="" method="post" name="chat"&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn