欢迎光临
我们一直在努力

javascript实现层的显示隐藏拖动效果

建站超值云服务器,限时71元/月
<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;
  width:300px;
  height:130px;
  background-color:#FFFFFF;
  border:1px #CCCCCC solid;
}
#b{
   height:20px;
   text-align:right;
   font-size:12px;
   border-bottom:1px #CCCCCC solid;
   line-height:20px;
   width:94%;
   float:left;
   text-align:center;
   cursor:hand;
}
#c{
   height:20px;
   text-align:right;
   font-size:12px;
   border-bottom:1px #CCCCCC solid;
   line-height:20px;
   width:5%;
   float:left;
}
#d{
   font-size:12px;
   padding:10px;
   line-height:23px;
}
#e{
   width:100%;
   height:20px;
   line-height:20px;
   text-align:center;
}
.clear{
  clear:both;
}

-->
</style>
</head>
<!--
功能:层的显示、隐藏、拖动效果
作者:wangsdong
开发:www.aspprogram.cn
原创文章,支持原创,保留此信息
-->
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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>&nbsp;&nbsp;</div>
   <div class="clear"></div>
   <div id="d">
    <input type="radio" value="a1" name="a1" checked>a1&nbsp;&nbsp;&nbsp;
 <input type="radio" value="a2" name="a1">a2&nbsp;&nbsp;&nbsp;
 <input type="radio" value="a3" name="a1">a3<br />
 <input type="radio" value="a4" name="a1">a4&nbsp;&nbsp;&nbsp;
 <input type="radio" value="a5" name="a1">a5&nbsp;&nbsp;&nbsp;
 <input type="radio" value="a6" name="a1">a6<br />
 <input type="radio" value="a7" name="a1">a7&nbsp;&nbsp;&nbsp;
 <input type="radio" value="a8" name="a1">a8&nbsp;&nbsp;&nbsp;
 <input type="radio" value="a9" name="a1">a9 
   </div>
   <div id="e"><input type="button" value="下一步" />&nbsp;<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>

(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)

源码下载地址:http://www.aspbc.com/code/showcode.asp?id=90

 

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » javascript实现层的显示隐藏拖动效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址