javascript

位置:IT落伍者 >> javascript >> 浏览文章

JS+CSS打造可拖动的聊天窗口层(兼容)


发布日期:2021年04月24日
 
JS+CSS打造可拖动的聊天窗口层(兼容)

<!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd>

<html xmlns=>

<head>

<meta httpequiv=contenttype content=text/html; charset=gb>

<meta httpequiv=contentscripttype content=text/javascript>

<meta httpequiv=contentstyletype content=text/css>

<title>DoDi Chat v Beta</title>

<style rel=stylesheet type=text/css media=all />

<!

body {

textalign:left;

margin:;

font:normal px Verdana Arial;

background:#FFEEFF

}

form {

margin:;

font:normal px Verdana Arial;

}

tableinput {

font:normal px Verdana Arial;

}

a:linka:visited{

textdecoration:none;

color:#;

}

a:hover{

textdecoration:none;

color:#FF

}

#main {

width:px;

position:absolute;

left:px;

top:px;

background:#EFEFFF;

textalign:left;

filter:Alpha(opacity=)

}

#ChatHead {

textalign:right;

padding:px;

border:px solid #;

background:#DCDCFF;

fontsize:px;

color:#FF;

cursor:move;

}

#ChatHead a:link#ChatHead a:visited {

fontsize:px;

fontweight:bold;

padding: px

}

#ChatBody {

border:px solid #;

bordertop:none;

padding:px;

}

#ChatContent {

height:px;

padding:px;

overflowy:scroll;

wordbreak: breakall

}

#ChatBtn {

bordertop:px solid #;

padding:px

}

>

</style>

<script language=javascript type=text/javascript>

<!

function $(d){return documentgetElementById(d);}

function gs(d){var t=$(d);if (t){return tstyle;}else{return null;}}

function gs(da){

if (dcurrentStyle){

var curVal=dcurrentStyle[a]

}else{

var curVal=documentdefaultViewgetComputedStyle(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 = objChatValue;

if (ovaluelength>){

$(ChatContent)innerHTML += <strong>Akon说</strong>+ovalue+<br/>;

ovalue=;

}

}

if (documentgetElementById){

(

function(){

if (windowopera){ documentwrite(<input type=hidden id=Q value= >); }

var n = ;

var dragok = false;

var yxddydx;

function move(e)

{

if (!e) e = windowevent;

if (dragok){

dstyleleft = dx + eclientX x + px;

dstyletop = dy + eclientY y + px;

return false;

}

}

function down(e){

if (!e) e = windowevent;

var temp = (typeof etarget != undefined)?etarget:esrcElement;

if (temptagName != HTML|BODY && tempclassName != dragclass){

temp = (typeof tempparentNode != undefined)?tempparentNode:tempparentElement;

}

if(TR==temptagName){

temp = (typeof tempparentNode != undefined)?tempparentNode:tempparentElement;

temp = (typeof tempparentNode != undefined)?tempparentNode:tempparentElement;

temp = (typeof tempparentNode != undefined)?tempparentNode:tempparentElement;

}

if (tempclassName == dragclass){

if (windowopera){ documentgetElementById(Q)focus(); }

dragok = true;

tempstylezIndex = n++;

d = temp;

dx = parseInt(gs(templeft))|;

dy = parseInt(gs(temptop))|;

x = eclientX;

y = eclientY;

documentonmousemove = move;

return false;

}

}

function up(){

dragok = false;

documentonmousemove = null;

}

documentonmousedown = down;

documentonmouseup = up;

}

)();

}

>

</script>

</head>

<body>

<div id=main class=dragclass >

<div id=ChatHead>

<a # onclick=ChatHidden();></a>

<a # onclick=ChatShow();>+</a>

<a # onclick=ChatClose();>x</a>

</div>

<div id=ChatBody>

<div id=ChatContent></div>

<div id=ChatBtn>

<form action= name=chat method=post>

<textarea name=ChatValue rows= ></textarea>

<input name=Submit type=button value=Chat onclick=ChatSend(thisform); />

</form>

</div>

</div>

</div>

</body>

</html>

               

上一篇:Jscript内部对象

下一篇:事半功倍系列之javascript