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


Posted in Javascript onMay 12, 2015

用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")?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>
<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 3water.com</div>
<div id="ChatBtn">
<form action="" method="post" name="chat">
</form>
</div>
</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
深入探讨前端框架react
Dec 09 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
Javascript中typeof 用法小结
May 12 #Javascript
js/jquery判断浏览器类型的方法小结
May 12 #Javascript
js实现div层缓慢收缩与展开的方法
May 11 #Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 #Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 #Javascript
JavaScript实现表格点击排序的方法
May 11 #Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 #Javascript
You might like
PHP4实际应用经验篇(5)
2006/10/09 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
Mac地址验证的javascript代码
2013/11/09 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python 探针的实现原理
2016/04/23 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
python抓取网页中链接的静态图片
2018/01/29 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
python openCV自制绘画板
2020/10/27 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
高中自我鉴定范文
2013/11/03 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
python 常用的异步框架汇总整理
2021/06/18 Python
Python内置数据类型中的集合详解
2022/03/18 Python