JavaScript模拟可展开、拖动与关闭的聊天窗口实例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript模拟可展开、拖动与关闭的聊天窗口实例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3620字,纯文字阅读大概需要6分钟。
内容图文
![JavaScript模拟可展开、拖动与关闭的聊天窗口实例](/upload/InfoBanner/zyjiaocheng/359/2645f846f14b4c7299d082143493052e.jpg)
用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.gxlcms.com</div> <div id="ChatBtn"> <form action="" method="post" name="chat"> </form> </div> </div> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的JavaScript模拟可展开、拖动与关闭的聊天窗口实例全部内容,希望文章能够帮你解决JavaScript模拟可展开、拖动与关闭的聊天窗口实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。