这篇文章主要介绍了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.vevb.com</div>
- <div id="ChatBtn">
- <form action="" method="post" name="chat">
- </form>
- </div>
- </div>
- </div>
- </body>
- </html>
希望本文所述对大家的javascript程序设计有所帮助。
新闻热点
疑难解答
图片精选
