层的显示、隐藏、拖动效果

作者：简简单单 2010-04-05

提示：您可以先修改部分代码再运行

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!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>无标题文档</title>
<style>
<!--
#aaa{ 
  position:absolute;
  display:none;
  
  
  background-color:#FFFFFF;
  border:1px #CCCCCC solid;
}
#b{
   
   text-align:right;
   font-size:12px;
   border-bottom:1px #CCCCCC solid;
   line-
   width:94%;
   float:left;
   text-align:center;
   cursor:hand;
}
#c{
   
   text-align:right;
   font-size:12px;
   border-bottom:1px #CCCCCC solid;
   line-
   width:5%;
   float:left;
}
#d{
   font-size:12px;
   padding:10px;
   line-
}
#e{
   width:100%;
   
   line-
   text-align:center;
}
.clear{
  clear:both;
}

-->
</style>
</head>

<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> 
                                  
  <input type="button" name="Submit" value="添加" id="id_buttom" onclick="javascript:c();"/>
</p>
<div id="aaa">
   <div id="b" onmousedown="startDrag(this)" onmouseup="stopDrag(this)" onmousemove="drag(this)">请选择类型</div>
   <div id="c"><span style="text-decoration:underline; cursor:hand;" onclick="d()">X</span>  </div>
   <div class="clear"></div>
   <div id="d">
    <input type="radio" value="a1" name="a1" checked>a1   
	<input type="radio" value="a2" name="a1">a2   
	<input type="radio" value="a3" name="a1">a3<br />
	<input type="radio" value="a4" name="a1">a4   
	<input type="radio" value="a5" name="a1">a5   
	<input type="radio" value="a6" name="a1">a6<br />
	<input type="radio" value="a7" name="a1">a7   
	<input type="radio" value="a8" name="a1">a8   
	<input type="radio" value="a9" name="a1">a9	
   </div>
   <div id="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onclick="javascript:d();" /></div>
</div>
<script language="javascript">
function d()
{
   $("aaa").style.display="none";
}
function c()
{
  $("aaa").style.display="block";
  $("aaa").style.left="150px";
  $("aaa").style.top="150px";
}
function $(id)
{
    return document.getElementById(id);
}
</script>
<script> 
var x0=0,y0=0,x1=0,y1=0; 
var moveable=false; 
//开始拖动; 
function startDrag(obj){ 
if(event.button==1){ 
obj.setCapture(); 
var win = obj.parentNode; 
x0 = event.clientX; 
y0 = event.clientY; 
x1 = parseInt(win.offsetLeft); 
y1 = parseInt(win.offsetTop); 
moveable = true; 
} 
} 
//拖动; 
function drag(obj){ 
if(moveable){ 
var win = obj.parentNode; 
win.style.left = x1 + event.clientX - x0; 
win.style.top = y1 + event.clientY - y0; 
} 
} 
//停止拖动; 
function stopDrag(obj){ 
if(moveable){ 
obj.releaseCapture(); 
moveable = false; 
} 
} 
</script> 
</body>
</html>

提示：您可以先修改部分代码再运行

层的显示、隐藏、拖动效果

相关文章

精彩推荐