Javascript弹出不同层的方法

文章类别：Javascript | 发表日期:2010-6-30 9:45:14

首先要说明的是,一个ID在页面里面存在多个是不正确的写法...

所以三个要弹出来层的ID,命名成 fd1,fd2,fd3

然后更改调用时候时,传的参数,原参数为fd,分别更改为fd1,fd2,fd3

为了显示出来区别,,给这三个层分别定义不同的CSS样式..

代码:

#fd1, #fd2, #fd3{    

    border: 2px solid #849BCA;

    margin-top:2px;

    margin-left:2px;

    float:left;

    overflow:hidden;

    position:absolute;

    left:0px;

    top:0px;

    cursor:move;

    float:left;

}

#fd1{

  width:500px;

  height:700px;

    background:#EDF1F8;    

}

#fd2{

  width:200px;

  height:400px;

    background:#EDF1F8;    

}

#fd3{

  width:400px;

  height:300px;

    background-color:#EDE9EC;

  border:2px solid #A65A9D;

}

还有一点,就是关于拖动的代码...原来的拖动的代码,我给删除了.换成了更容易使用的..

代码:

var ie=document.all;

var nn6=document.getElementById&&!document.all;

var isdrag=false;

var y,x;

var oDragObj;

function moveMouse(e) {

if (isdrag) {

oDragObj.style.top  =  (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";

oDragObj.style.left  =  (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";

return false;

}

}

function initDrag(e) {

var oDragHandle = nn6 ? e.target : event.srcElement;

var topElement = "HTML";

while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {

oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;

}

if (oDragHandle.className=="dragAble") {

isdrag = true;

oDragObj = oDragHandle;

nTY = parseInt(oDragObj.style.top+0);

y = nn6 ? e.clientY : event.clientY;

nTX = parseInt(oDragObj.style.left+0);

x = nn6 ? e.clientX : event.clientX;

document.onmousemove=moveMouse;

return false;

}

}

document.onmousedown=initDrag;

document.onmouseup=new Function("isdrag=false");

并根据这段拖动代码的要求,给那三个要拖动的层加上, class="dragAble"
也就是允许拖动的意思..

最后一点.因为弹出以后每个层的 z-index值不一样.这样,如果在拖动的时候,不改变它的会,它会因为不在最前面,而被其他层挡到,所以我又加了一个全局变量(index),初始值是１００,
每单一次层,它的值加１,并赋值给被单击的层的zIndex.这样就可以实现,让被拖动的层一直在最上面显示了..

运行代码：
<font color=red>
<!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" />
<title>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
.bodyL{
float:left;
width:84px;
margin-right:2px;
}
#fd1, #fd2, #fd3{
border: 2px solid #849BCA;
margin-top:2px;
margin-left:2px;
float:left;
overflow:hidden;
position:absolute;
left:0px;
top:0px;
cursor:move;
float:left;
}
#fd1{
width:500px;
height:700px;
background:#EDF1F8;
}
#fd2{
width:200px;
height:400px;
background:#EDF1F8;
}
#fd3{
width:400px;
height:300px;
background-color:#EDE9EC;
border:2px solid #A65A9D;
}
.content{
padding:10px;
}
</style>
</head>
<body>
<div class="bodyL">
<a href="#" onclick = "show('fd1');return false;">
  <br />
<br />
<br />
[打开层1]
</a>
</div>
<div id="fd1" style="display:none;filter:alpha(opacity=100);opacity:1;" class="dragAble">
<div class="content"><div class="title_close1" onclick = closeed('fd1');return false;">关闭</div><br />
移动层1<br /></div>
</div>
<div class="bodyL">
<a href="#" onclick = "show('fd2');return false;">
  <br />
<br />
<br />
[打开层2]
</a>

</div>
<div id="fd2" style="display:none;filter:alpha(opacity=100);opacity:1;" class="dragAble">
<div class="content"><div class="title_close1" onclick = closeed('fd2');return false;">关闭</div><br />
移动层2<br /></div>
</div>
<div class="bodyL">
<a href="#" onclick = "show('fd3');return false;">
  <br />
<br />
<br />
[打开层3]
</a>
</div>
<div id="fd3" style="display:none;filter:alpha(opacity=100);opacity:1;" class="dragAble">
<div class="content"><div class="title_close1" onclick = closeed('fd3');return false;">关闭</div><br />
移动层3<br /></div>
</div>
<script type="text/javascript">
var prox;
var proy;
var proxc;
var proyc;
function show(id){/*--打开--*/
  clearInterval(prox);
  clearInterval(proy);
  clearInterval(proxc);
  clearInterval(proyc);
  var o = document.getElementById(id);
  o.style.display = "block";
  o.style.width = "1px";
  o.style.height = "1px";
  prox = setInterval(function(){openx(o,500)},10);
}
function openx(o,x){/*--打开x--*/
  var cx = parseInt(o.style.width);
  if(cx < x)
  {
   o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
  }
  else
  {
   clearInterval(prox);
   proy = setInterval(function(){openy(o,200)},10);
  }
}
function openy(o,y){/*--打开y--*/
  var cy = parseInt(o.style.height);
  if(cy < y)
  {
   o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
  }
  else
  {
   clearInterval(proy);
  }
}
function closeed(id){/*--关闭--*/
  clearInterval(prox);
  clearInterval(proy);
  clearInterval(proxc);
  clearInterval(proyc);
  var o = document.getElementById(id);
  if(o.style.display == "block")
  {
   proyc = setInterval(function(){closey(o)},10);
  }
}
function closey(o){/*--打开y--*/
  var cy = parseInt(o.style.height);
  if(cy > 0)
  {
   o.style.height = (cy - Math.ceil(cy/5)) +"px";
  }
  else
  {
   clearInterval(proyc);
   proxc = setInterval(function(){closex(o)},10);
  }
}
function closex(o){/*--打开x--*/
  var cx = parseInt(o.style.width);
  if(cx > 0)
  {
   o.style.width = (cx - Math.ceil(cx/5)) +"px";
  }
  else
  {
   clearInterval(proxc);
   o.style.display = "none";
  }
}

var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
var index=100;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="dragAble") {
isdrag = true;
oDragObj = oDragHandle;
oDragObj.style.zIndex = ++index;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function("isdrag=false");
</script>
</body>
</html>
</font>

Windows操作 [文]	Word教程 [文]	Excel教程 [文]	PowerPoint [文]	Dreamweaver [文]	Fireworks [文]
Flash教程 [文]	PhotoShop [文]	CorelDraw [文]	C语言教程 [文]	Html教程 [文]	Div+Css布局 [文]
Javascript [文]	ACCESS数据库 [文]	ASP教程 [文]	SQLServer [文]	ASP.NET教程 [文]	FlashAS [文]

Word教程网	Excel教程网	Dreamweaver 教程网	Fireworks教程网	PPT教程网	FLASH教程网	PS教程网
HTML教程网	DIV CSS教程网	FLASH AS教程网	ACCESS教程网	SQL SERVER教程网	C语言教程网	JAVASCRIPT教程网
ASP教程网	ASP.NET教程网	CorelDraw教程网