JavaScript模擬可展開、拖動與關閉的聊天窗口實例
更新時間：2015年05月12日 09:05:11 投稿：shichen2014
這篇文章主要介紹了JavaScript模擬可展開、拖動與關閉的聊天窗口,實例分析了javascript實現(xiàn)可拖動的div層相關技巧,非常具有實用價值,需要的朋友可以參考下
用JavaScript實現(xiàn)的仿QQ聊天窗口，可以展開層、拖動層、關閉層，還可以簡單發(fā)消息，很不錯吧，而且代碼也不多，適合新手研究，也比較實用，你可以在此基礎上擴展很多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.dhdzp.com</div>
<div id="ChatBtn">
<form action="" method="post" name="chat">
</form>
</div>
</div>
</div>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
JS如何從一個數(shù)組中隨機取出一個元素或者幾個元素呢？其實方法很簡單，下面小編給大家分享了JS隨機取出幾個數(shù)組元素的方法，非常不錯，需要的朋友參考下2016-08-08
這篇文章主要介紹了用js判斷是否為360瀏覽器的實現(xiàn)代碼,有時候我們需要判斷是否為360瀏覽器，包括百度聯(lián)盟后臺就有這樣的提示需要的朋友可以參考下2015-01-01
使用ajax的post同步執(zhí)行(實現(xiàn)方法)
下面小編就為大家分享一篇使用ajax的post同步執(zhí)行(實現(xiàn)方法)，具有很好的參考價值，希望對大家有所幫助2017-12-12
拖放效果，也叫拖拽、拖動，學名Drag-and-drop ，是最常見的js特效之一。 如果忽略很多細節(jié)，實現(xiàn)起來很簡單，但往往細節(jié)才是難點所在。2008-12-12
這篇文章主要為大家詳細介紹了Javascript中的作用域，具有一定的參考價值，感興趣的朋友可以參考一下2016-10-10
JS使用reduce()方法處理樹形結構數(shù)據(jù)
這篇文章主要介紹了JS使用reduce()方法處理樹形結構數(shù)據(jù)，對樹形結構數(shù)據(jù)感興趣的同學，可以參考下2021-05-05
這篇文章主要介紹了JS獲取鼠標相對位置的方法,涉及javascript事件響應及針對頁面元素屬性的動態(tài)操作技巧,需要的朋友可以參考下2016-09-09
今天小編就為大家分享一篇zepto.js 實時監(jiān)聽輸入框的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-12-12
JavaScript實現(xiàn)手寫循環(huán)滑動效果
最近一直在做業(yè)務，遇到一個需求是頁面頂部需要展示圖片，可以拖動，拖動到最后一張的時候需要無縫切換到第一張，從而實現(xiàn)循環(huán)滑動，所以本文就來和大家分享一下實現(xiàn)方法2023-05-05
利用404錯誤頁面實現(xiàn)UrlRewrite的實現(xiàn)代碼
要求:網(wǎng)站編碼為utf-8,不適用于GB2312; 替換字符的正則可以自己增加和修改，以適合自己的網(wǎng)站；2008-08-08