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实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
第一篇初识bootstrap
Jun 21 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
简单学习vue指令directive
Nov 03 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 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
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
document.all与WEB标准
2020/05/13 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python学习之编写查询ip程序
2016/02/27 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
python对常见数据类型的遍历解析
2019/08/27 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
天网工程实施方案
2014/03/26 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年实习期工作总结
2014/11/27 职场文书
求职自我评价怎么写
2015/03/09 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android