大家好,我好想自己亲手写一个可以用鼠标拖动的层,可是我一点头绪也没有,从JAVAEYE上搜到了一篇文章,可是还是看不懂.
有谁知道这个原理,可是讲讲吗(最好写一点面向对象的js代码)?我想弄懂之后,创建一个JS 工具类,用来创建一个notice对话框.
谢谢您!!!!
javaeye上一网友的文章,他的地址我不记得了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.divcc{
position:absolute;
border: 1px #FF99FF solid;
background-color:#FFFF99;
height:auto;
width:300px;
z-index:1000;
}
.divdd{
position:absolute;
border: 0px;
background-color:#FFFF80;
height:auto;
width:300px;
z-index:999;
}
</style>
<script>
function cursorover(){
document.getElementById("cc").style.cursor="move";
}
function cursorout(){
document.getElementById("cc").style.cursor="auto";
}
//可移动的层
var dragapproved=false;
var z,x,y;
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x;
z.style.pixelTop=temp2+event.clientY-y;
return false;
}
if(event.button==2){
alert("别复制！！");
return false;
}
}
function drags(){
if (!document.all)
return;
if (event.srcElement.className=="divcc"){
dragapproved=true;
z=event.srcElement;
temp1=z.style.pixelLeft;
temp2=z.style.pixelTop;
x=event.clientX;
y=event.clientY;
document.onmousemove=move;
}
}
document.onmousedown=drags;
document.onmouseup=new Function("dragapproved=false");
//--------------------------------------------------------------------------------------------------------------------------
//初始化层位置
function init(){
var w =document.body.clientWidth;
var h =document.body.clientHeight;
var divObj = document.getElementById("cc");
divObj.style.left = w/2;
divObj.style.top = h/2;
alert('w:'+w);
alert('h:'+h);
}
//最大化
function max(){
document.getElementById("dd").style.display="inline";
var divObj = document.getElementById("cc");
divObj.style.width="300px";
var w =document.documentElement.clientWidth;
var h =document.documentElement.clientHeight;
divObj.style.left = w/2;
divObj.style.top = h/2;
}
//最小化
function min(){
document.getElementById("dd").style.display="none";
var divObj = document.getElementById("cc");
var w =document.documentElement.clientWidth; //获得网页可见区域的宽度（不包括边框）
var h =document.documentElement.clientHeight; //获得网页可见区域的高度（不包括边框）
divObj.style.width="150px"; //设置层宽度
var myw = divObj.offsetWidth; //获得自身的宽度（包括边框）
var myh = divObj.offsetHeight; //获得自身的高度（包括边框）
var curw = w - myw;
var curh = h - myh;
divObj.style.left = curw;
divObj.style.top = curh;
}
//关闭
function clo(){
document.getElementById("cc").style.display="none";
}
</script>
</HEAD>
<BODY onload="init()">
<div id="cc" onmouseover="cursorover()" onmouseout="cursorout()" class="divcc">
<span style="height:20px;" onclick="max()">最大化</span> <span onclick="min()">最小化</span> <span onclick="clo()">关闭</span><br/>
<div id="dd" class="divdd">
<table border="1px" cellpadding="0" cellspacing="0" bordercolor="#FF33CC" width="300px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</div>
</div>
</BODY>
</HTML>
document.documentElement与document.body是同一个对象吗?
答案是:
原来HTML里是document.body
XHTML里是document.documentElement
都指的是 <body >节点(OR元素)
可以这样兼容：
function getBodyObj()
{
return (document.documentElement) ? document.documentElement : document.body ;
}
分享到：
相关推荐
在标题提及的案例中，"jQuery弹出层 可移动层 提示框 浮动层"，意味着我们需要创建一个不仅可以显示信息，还可以通过用户手势移动的浮动窗口。为了实现这一功能，我们需要结合jQuery的选择器、事件处理和动画方法。...
总的来说，"漂亮的js可移动弹出层"是一个结合了JavaScript和jQuery技术的交互设计实例，它通过优雅的代码和精心设计的用户界面，提高了网站的可用性和吸引力。开发者可以通过研究这些文件，学习如何创建类似的弹出层...
在网页开发中，创建一个可移动的遮罩层通常是实现交互性和用户体验的重要一环。"js弹出可移动的遮罩层"是一个典型的JavaScript技术应用，用于在网页上生成一个可移动的覆盖层，通常用于显示提示信息、加载进度或者...
在IT行业中，三层架构是一种常见的软件开发模型，用于构建可扩展、可维护的B/S（浏览器/服务器）系统。这种架构将应用程序分为三个主要部分：表现层（Presentation Layer）、业务逻辑层（Business Logic Layer）和...
在"CustomDiv"这个文件中，我们可以推测这可能包含了一段代码示例，演示如何创建一个具有上述特性的对话框：可刷新的模式对话框、可移动的div以及遮罩层。实现这样的功能通常涉及到以下几个步骤： 1. **创建模式...
在网页设计和开发中，创建一个可移动的div层是一个常见的需求，这通常涉及到JavaScript或者CSS的交互式应用。标题“可移动的div层，简单通用”表明我们要讨论的是一个适用于多种情况、易于实现的解决方案，它允许...
在这个项目中，jQuery被用来增强用户体验，例如通过Ajax实现无刷新添加商品到购物车，以及创建可移动的模态层。jQuery的Cookie插件允许开发者在客户端存储数据，这在购物车场景下非常有用，因为它可以记住用户的选择...
1. **HTML结构**：首先，需要在HTML中创建一个可拖动的层（div），并为其设置唯一ID以便在JavaScript中引用。 2. **CSS样式**：通过CSS设定层的外观和位置，如宽度、高度、边框、背景色等，并确保其可被鼠标选中。 ...
在本主题中，我们将深入探讨如何使用Bootstrap创建一个无遮罩层（modal）的可移动对话框。这种对话框在用户交互中具有较高的灵活性，可以增强用户体验。 首先，我们需要理解Bootstrap中的模态组件（Modal）。模态...
虽然具体内容无法直接提供，但可以基于这个主题分享一些通用的方法来创建一个可移动的div层： 1. **HTML 结构**：首先，我们需要一个包含内容的div元素，例如： ```html 弹出层标题 这里是内容... ``` 2. ...
JavaScript 移动层，也称为弹出层或对话框，是一种常见的前端开发技术，用于在网页上创建可交互的浮动窗口。这种技术尤其在移动设备上广泛应用，因为它们提供了便捷的方式来展示信息、提示用户或者进行复杂的用户...
1. 创建HTML层（可以是`<div>`元素或其他合适的元素），并设置其样式，如背景色、边框、透明度等，使其看起来像一个可移动的窗口。 2. 为这个层添加`mousedown`事件监听器，记录初始鼠标位置和层的当前位置。 3. ...
在网页开发中，这种功能通常是通过JavaScript实现的，利用DOM（文档对象模型）操作来创建和控制一个浮动的层（也称为div层或对话框）。"基于层的网页弹出提示，可移动，网页变灰"这个压缩包文件包含了实现这一功能的...
在计算机操作中，管理和操作文件夹是日常工作中不可或缺的一部分。多层文件夹的创建与删除是组织和整理大量数据的有效方式。本实例将详细介绍如何在Windows操作系统中创建和删除多层文件夹，以便更好地管理你的文件...
为了保持组织结构，创建两个子文件夹，一个用于DAL，一个用于BLL，将类型化数据集移动到DAL文件夹，并在BLL文件夹中创建四个类文件。 **方法实现** 每个BLL类将包含与TableAdapter对应的方法，但在此基础上增加...
通过上述步骤，我们可以实现一个基本的居中可移动的弹出层。这种方法的优点在于简单易懂，适用于大多数场景。但在实际应用中还需要考虑兼容性问题，特别是对于不同浏览器的支持情况。此外，还可以通过引入库如jQuery...
`jspanel`是一个轻量级且功能强大的JavaScript库，专门用于在网页上创建可定制的浮动层，它提供了丰富的选项和事件，使得开发者可以轻松地构建出多功能浮动层。本文将深入探讨如何使用`jspanel`来创建各种类型的浮动...
这个小插件的核心功能是创建一个可移动、可关闭的弹出层，它在设计时特别考虑了对老版本Internet Explorer（IE6、IE7和IE8）的兼容性。 jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
以上就是利用JavaScript实现固定并可移动层的基本流程。通过这个例子，我们可以深入理解JavaScript在网页交互中的作用，以及如何结合CSS实现更丰富的用户界面动态效果。在实际开发中，还可以进一步优化，比如添加...
标题中的“javascript经典特效---可移动的宣传层”暗示了这个压缩包可能包含了一个使用JavaScript实现的互动式网页效果，具体来说是一个可以被用户在页面上自由移动的宣传层。这种效果通常用于网站上的广告或者信息...