<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>DoDi Chat v1.0 Beta</title>
<style rel="stylesheet" type="text/css" media="all" />
<!--
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 id="main" class="dragclass" style="left:600px;top:300px;">
<div id="ChatHead">
<a href="#" onclick="ChatHidden();">-</a>
<a href="#" onclick="ChatShow();">+</a>
<a href="#" 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="3" style="width:350px"></textarea>
<input name="Submit" type="button" value="Chat" onclick="ChatSend(this.form);" />
</form>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
1.兼容IE5.5+，插件css样式整合到了插件代码中，取消了1.0版的样式表 新增拖拽功能(默认可拖拽)。可设置拖拽的触点元素,默认是border(弹窗的半透明的的边栏) 2.可在参数自定义弹窗border边框颜色和透明度 3.可设置...
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
简单的一个js操作div例子，模拟聊天窗口，实现拖拉控制div高度等功能，有需要的可以看看，对谷歌，IE,360，火狐，op都已兼容。
artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，因此你不必去考虑消息内容尺寸...
超酷的一个基于JavaScript/XHTML/CSS 标准的窗口特效，支持鼠标拖动，动态切换，代码规范，用途广泛，与浏览器兼容性好，同时它还支持自由度极高的窗口样式定制，拿来即用，当然，你也可以下载下来好好研究一番，...
本文实例讲述了JS实现左右拖动改变内容显示区域大小...本代码完全JavaScript与CSS代码结合实现，在各主流浏览器内运行的兼容性也不错，左右拖动改变大小的JS代码推荐给大家。 运行效果截图如下： 在线演示地址如下： ...
jQuery jQuery UI-用于可拖动的窗口 真棒字体-用于任务栏图标 FileSaver.js-用于记事本中的“保存”选项。 html5shiv.js-为较旧的浏览器提供HTML5功能 normalize.css-修复了某些浏览器（ugh），特别是移动Safari中...
artDialog是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。 功能： 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、...
拖动窗口屏幕时，它也是自适应的。 在显示宽度受到限制的空间中，它可以显示字符串的头部和尾部。 通过这种方式，将更容易推断出字符串的含义。 该组件正是您所需要的！ 特征 一种省略单行文本的新颖方法 良好的...
17.js插件：层拖拽 18.js插件：输入验证(中英文长度/正则/AJAX/自定义) 19.js插件：模拟 Title 实现功能： 1.同一用户只能在一处登录； 2.好友分组列表； 3.聊天； 4.离线消息； 5.上线/下线通知； 6.日志； 7....
Drag：是否允许拖动窗口，值为布尔型(true|false)，默认值为true，注意需要页面引用了Drag.js。 OKEvent：点击确定按钮后执行的函数。 CancelEvent：点击取消按钮或点击关闭按钮后执行的函数，默认为关闭本...
• layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章（\第14章） • 14.1.htm confirm()方法用作判断条件 • 14.2.htm alert()方法与confirm()方法的使用 ...
目标是创建没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注：ExtAspNet基于一些开源的程序ExtJS, ...
目标是创建没有ViewState，没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注：ExtAspNet基于一些开源...
• layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章（\第14章） • 14.1.htm confirm()方法用作判断条件 • 14.2.htm alert()方法与confirm()方法的使用 • 14.3....
dialogTools是一个用于创建自定义对话框的小工具集，它自身不具备UI，但可以很方便的让你设计的层/表格实现可拖动位置、调节尺寸、跟随元素、设置锁屏遮罩。 应用范围如：标准对话框/弹出层、下拉菜单、webqq2多...
- 弹出层中的弹出层关闭，父窗口失去焦点问题。 - 代码中grunt部分代码拆分开，放到程序外面；提交到git、osc - 桌面：删除alert enter快捷键删除 - install 检测 加入跳过，(只判断用到的函数) 加入多语言 - ...
7、 锁屏的时候改用js屏蔽页面滚动功能，取消原来CSS隐藏滚动条，防止页面偏移 8、 给确定按钮增加Ctrl + Enter快捷键，锁屏的时候支持tab与方向键切换按钮焦点 9、 锁屏的时候屏蔽了键盘操作刷新、Tab切换(只在...
要求 浏览器支持：火狐、Chrome HTML5、CSS3 和相关的现代前端标准，包括跨浏览器兼容性和遗留回退的知识是必要的 支持的图片格式：jpg、png 仔细的代码结构 注释代码 无第三方代码 允许测试解决方案的基本 UI
2，播放器嵌入效果和弹出效果任意选择让你更显各自网站特点3，个性化的变妆系统，让使用任意定制自己喜欢的皮肤效果4，视频窗口拖动完全认你行，无拘无束的使用感受5，结合浩海播放器原有各种功能，可以说让你的网络...