论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

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),初始值是100,
每单一次层,它的值加1,并赋值给被单击的层的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>

上一篇:JavaScript图片放大效果 人气:3706
下一篇:Javascript显示隐藏层 人气:4430
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058