<!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>
分享到：
相关推荐
本话题主要关注如何利用这三种技术实现一个可拖拽的弹出层，让用户可以自由地在浏览器窗口内移动它。 首先，我们来理解`div`。`div`是HTML中的一个块级元素，全称为“division”，即分区或分段。它可以用来包裹其他...
从给定文件中提取到的知识点涵盖了用JavaScript和CSS实现具有圆角和可拖拽功能的弹出层技术。接下来，我们将详细阐述这些知识点。 首先，我们需要理解如何使用CSS来实现圆角矩形的效果。在文件中提供了相应的CSS...
【标题】"模仿webQQ,采用js+div+css"所涉及的知识点主要集中在Web前端开发领域，特别是关于网页设计和JavaScript技术的应用。WebQQ是腾讯公司推出的一种基于Web浏览器的即时通讯服务，用户无需下载客户端，只需通过...
"js弹出层可拖动兼容各大浏览器"这个主题涵盖了如何利用JavaScript实现一个弹出窗口，并确保它在各种浏览器（如Chrome、Firefox、Safari、Edge和IE等）上具有良好的兼容性。下面我们将深入探讨这一技术。 首先，...
在这个项目中，我们讨论的是如何使用这两种语言来创建一个可拖动的弹出层，并实现兼容IE7及以上版本，包括Firefox和Chrome在内的多种浏览器的锁屏效果。这个功能在网页应用中很常见，比如在显示模态对话框或提示信息...
本资源提供了一种解决方案，它是一个基于JavaScript和CSS的可定制对话框控件，允许开发者创建具有遮罩层效果的浮动窗口，以增强用户体验。 首先，"可拖动窗口控件"是指用户可以通过鼠标在页面上拖动窗口的位置，这...
在本项目中，“html+css+js实现XP WINDOW界面修改版”是一个利用Web技术（HTML、CSS和JavaScript）重新创建并模拟Windows XP操作系统界面的示例。这个项目旨在展示Web前端开发的灵活性和强大性，同时也可能是为了...
这个例子展示了如何用JavaScript和CSS创建一个可拖动的弹出框。JavaScript将处理拖动逻辑，而CSS则用于设定样式和交互反馈。 7. **Js版Windows窗口模拟，兼容FF火狐，可拖动，可改变大小.htm** 这是一个更复杂的...
总的来说，"js实现悬浮可拖动登录窗口(demo)"项目展示了如何利用JavaScript和CSS实现一个交互式的悬浮登录窗口，同时考虑了多浏览器兼容性和用户体验细节。这个项目对于学习JavaScript DOM操作、事件处理和浏览器...
总的来说，实现"可拖动div层，兼容IE火狐等浏览器"涉及到HTML、CSS和JavaScript的综合应用，尤其是jQuery的使用，可以高效地创建出用户友好的交互体验。通过学习和理解这些文件，你可以掌握如何在自己的项目中创建...
在JavaScript编程中，实现窗口拖动效果是一项常见的需求，尤其在网页交互设计中。这个话题主要涉及以下几个核心知识点： 1. **DOM操作**：在JavaScript中，我们需要通过DOM（Document Object Model）来选取和操作...
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....
这个场景中提到的“浮动可拖动的窗口”是一个使用JavaScript实现的功能，允许用户通过鼠标交互来移动窗口的位置。JavaScript是一种强大的客户端脚本语言，广泛应用于网页和Web应用程序，以增强用户体验和交互性。 ...
"基于JS的可以拖拽的窗口 JS实现网页内实现可以改变浮动层窗口大小的特效"是一个典型的前端技术应用场景，它涉及到JavaScript（JS）的基本知识，特别是DOM操作、事件处理以及CSS样式控制。这个项目的目标是创建一个...
这个登录窗口不仅美观，还具备可自由拖动的功能，为用户提供更友好的交互体验。 首先，HTML5是现代网页开发的基础，它引入了许多新的语义化标签，如、、、等，这些标签有助于提高页面结构的清晰度和可访问性。在"qq...
本文档“js弹出层可拖动兼容各大浏览器”提供了一个实现这种功能的示例代码，主要涉及到以下几个关键知识点： 1. **预加载图片**： 代码首先定义了一个数组`imgname`，包含了弹出层边框图片的路径，并通过循环预...
本文将详细讲解如何创建一个可拖动且兼容各大浏览器的 JavaScript 弹出层，并探讨相关技术要点。 首先，为了实现弹出层的拖动功能，我们需要监听鼠标事件。当用户点击弹出层标题区域时，记录下初始鼠标位置和当前...
本压缩包“js可拖拽最大最小化弹出层窗口可通过八个方向改变大小.zip”提供了实现弹出层窗口拖拽、最大化、最小化以及任意方向调整大小的功能。这一功能在网页应用、桌面应用程序或在线工具中非常常见，为用户提供...
本文将深入探讨如何利用Ajax实现一个可拖拽的窗口功能。 首先，让我们理解拖拽（Drag and Drop）的基本原理。在网页中，拖拽功能通常是通过监听鼠标事件来实现的，包括`mousedown`（鼠标按下）、`mousemove`（鼠标...