浏览 2409 次
|
锁定老帖子 主题：创建一个可移动的层
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-02-17
大家好,我好想自己亲手写一个可以用鼠标拖动的层,可是我一点头绪也没有,从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 ;
}
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
