JavaScript模拟可展开、拖动与关闭的聊天窗口实例
更新时间：2015年05月12日 09:05:11 投稿：shichen2014
这篇文章主要介绍了JavaScript模拟可展开、拖动与关闭的聊天窗口,实例分析了javascript实现可拖动的div层相关技巧,非常具有实用价值,需要的朋友可以参考下
用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 www.jb51.net</div>
<div id="ChatBtn">
<form action="" method="post" name="chat">
</form>
</div>
</div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
JS如何从一个数组中随机取出一个元素或者几个元素呢？其实方法很简单，下面小编给大家分享了JS随机取出几个数组元素的方法，非常不错，需要的朋友参考下2016-08-08
这篇文章主要介绍了用js判断是否为360浏览器的实现代码,有时候我们需要判断是否为360浏览器，包括百度联盟后台就有这样的提示需要的朋友可以参考下2015-01-01
下面小编就为大家分享一篇使用ajax的post同步执行(实现方法)，具有很好的参考价值，希望对大家有所帮助2017-12-12
拖放效果，也叫拖拽、拖动，学名Drag-and-drop ，是最常见的js特效之一。 如果忽略很多细节，实现起来很简单，但往往细节才是难点所在。2008-12-12
这篇文章主要为大家详细介绍了Javascript中的作用域，具有一定的参考价值，感兴趣的朋友可以参考一下2016-10-10
这篇文章主要介绍了JS使用reduce()方法处理树形结构数据，对树形结构数据感兴趣的同学，可以参考下2021-05-05
这篇文章主要介绍了JS获取鼠标相对位置的方法,涉及javascript事件响应及针对页面元素属性的动态操作技巧,需要的朋友可以参考下2016-09-09
今天小编就为大家分享一篇zepto.js 实时监听输入框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-12-12
最近一直在做业务，遇到一个需求是页面顶部需要展示图片，可以拖动，拖动到最后一张的时候需要无缝切换到第一张，从而实现循环滑动，所以本文就来和大家分享一下实现方法2023-05-05
要求:网站编码为utf-8,不适用于GB2312; 替换字符的正则可以自己增加和修改，以适合自己的网站；2008-08-08
最新评论