JavaScript模拟可展开、拖动与关闭的聊天窗口实例

网络编程 2024/11/17 佚名

3 2 1

用JavaScript实现的仿QQ聊天窗口，可以展开层、拖动层、关闭层，还可以简单发消息，很不错吧，而且代码也不多，适合新手研究，也比较实用，你可以在此基础上扩展很多JS+CSS应用。

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt-->
<html>
<head>
<title>层展开、层拖动、层关闭</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all" rel="stylesheet">
 <!--
 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='';
  }
 }
 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")"HTML"|"BODY" && temp.className != "dragclass"){
      temp = (typeof temp.parentNode != "undefined")"undefined")"undefined")"undefined")"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 class="dragclass" id="main" style="LEFT: 588px; TOP: 298px">
<div id="ChatHead"><a onclick="ChatHidden();" href="#">-</a>
<a onclick="ChatShow();" href="#">+</a>
<a onclick="ChatClose();" href="#">x</a> </div>
<div id="ChatBody">
<div id="ChatContent">HI! Hello ! Welcome to www.jb51.net</div>
<div id="ChatBtn">
<form action="" method="post" name="chat">
</form>
</div>
</div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

JavaScript,模拟,展开,拖动,关闭,聊天窗口

标签：

JavaScript,模拟,展开,拖动,关闭,聊天窗口

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“JavaScript模拟可展开、拖动与关闭的聊天窗口实例”

JavaScript模拟可展开、拖动与关闭的聊天窗口实例

暂无“JavaScript模拟可展开、拖动与关闭的聊天窗口实例”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

2024年11月17日

JavaScript模拟可展开、拖动与关闭的聊天窗口实例

JavaScript,模拟,展开,拖动,关闭,聊天窗口

javascript中基本类型和引用类型的区别分析

Javascript中typeof 用法小结

评论“JavaScript模拟可展开、拖动与关闭的聊天窗口实例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接