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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:59 PM

javascript 关闭展开拖动模拟

用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")&#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;
   }
  )();
 }
 -->
 </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程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7364

Java教程

1628

CakePHP 教程

1353

Laravel 教程

1266

PHP教程

1214

显示更多

Related knowledge

360浏览器推荐的广告如何关闭？如何关闭电脑360浏览器推荐的广告？ Mar 14, 2024 am 09:16 AM

　　360浏览器推荐的广告如何关闭？相信很多的用户们都在使用360浏览器，不过这款浏览器有时候会弹出广告，这就使得很多的用户们都十分的苦恼，下面就让本站来为用户们来仔细的介绍一下如何关闭电脑360浏览器推荐的广告吧。　　如何关闭电脑360浏览器推荐的广告？　　方法一：　　1、打开360安全浏览器。　　2、找到右上角“三横杠”标志，点击【设置】。　　3、在弹出的界面左侧任务栏中找到【实验室】，勾选【启用“360热点资讯”功能】即可。　　方法二：　　1、首先双击

新浪新闻速递怎么关闭关闭速递功能的操作步骤 Mar 12, 2024 pm 09:46 PM

　　新浪新闻软件内提供的新闻头条信息非常多，基本上都是官方平台推送的，每一篇新闻文章内容都是拥有真实性的，上下滑动一键搜索翻阅，整体的阅读氛围更加舒适。输入手机号在线登录，不同领域的新闻频道都是开放的，二十四小时更新都是不重复的，国内外、地方时事新闻都不会少的，上下滑动选择一键翻阅，新闻内容都是大家感兴趣的，还能关闭新闻速递功能，这样也不会被影响到，任何时候都可以打开一览，海量热门的新闻头条新鲜事抢先看，现在小编在线详细为新浪新闻用户们带来关闭速递功能的操作步骤。　　找到新浪新闻进入，点击右下角

如何在Windows 11中关闭安全中心 Mar 28, 2024 am 10:21 AM

Windows11是微软公司最新推出的操作系统版本，相比之前的版本，Windows11对系统安全性进行了更为严格的管理和监控，其中一个重要的功能就是安全中心。安全中心可以帮助用户管理和监控系统的安全状态，确保系统不受恶意软件和其他安全威胁的侵害。虽然安全中心对于保护系统安全很重要，但有时候用户可能因为个人需求或其他原因希望关闭安全中心。本文将介绍如何在W

Windows 11安全中心关闭方法详解 Mar 27, 2024 pm 03:27 PM

在Windows11操作系统中，安全中心是一个重要的功能，它帮助用户监控系统安全状态、防御恶意软件和保护个人隐私。然而，有时候用户可能需要临时关闭安全中心，例如在安装某些软件或进行系统调优时。本文将详细介绍Windows11安全中心的关闭方法，帮助您正确和安全地操作系统。1.如何关闭Windows11安全中心在Windows11中，关闭安全中心并不

快手怎么关闭免密支付快手关闭免密支付方法教程 Mar 23, 2024 pm 09:21 PM

　　快手是一款很卓越的视频播放器，快手中的免密支付功能小伙伴们都非常熟悉，在日常生活中可以给我们很大的帮助，尤其是在平台中购买自己需要的商品时可以更好的去支付，我们现在要去取消掉该如何操作呢?怎么样才能真正有效取消掉免密支付功能?免密支付取消的方法非常简单，具体的操作方法已经整理好了，让我们一起到本站本站中来看整篇攻略吧，希望能够帮助到大家。快手关闭免密支付方法教程　　1、打开快手app，点击左上角的三根横线。　　2、点击快手小店。　　3、在上面的选项栏中，找到免密支付并点击进去。　　4、点击支

Windows安全中心实时保护关闭方法详解 Mar 27, 2024 pm 02:30 PM

Windows操作系统作为全球用户数量最庞大的操作系统之一，一直以来备受用户青睐。然而，在使用Windows系统时，用户们可能会遇到诸多安全隐患，如病毒攻击、恶意软件等威胁。为了强化系统安全，Windows系统内置了许多安全保护机制，其中之一便是Windows安全中心的实时保护功能。今天，我们将会详细介绍Windows安全中心实时保护的关闭方法。首先，让我们

抖音私信对方关闭了私信模式怎么打开？私信对方关闭了私信模式能看到吗？ Mar 28, 2024 am 08:01 AM

抖音是一款备受欢迎的短视频社交平台，让用户可以简单地记录生活、分享快乐。私信功能在抖音中扮演着重要的角色，是用户之间互动的主要方式之一。有时候，用户可能会碰到对方关闭了私信模式，导致无法发送消息的情况。一、抖音私信对方关闭了私信模式怎么打开？1.确认对方是否开启了隐私设置首先，我们应该确认对方是否启用了隐私设置，可能已经限制了私信的接收。如果他们设置了仅允许熟人私信，我们可以尝试通过其他途径联系他们，比如通过共同的朋友或在社交媒体平台上进行互动。2.发送好友申请如果对方并未开启隐私设置，那么我们