注册 | 登录 | 设为首页 | 加入收藏
您当前的位置:飞翔学院-IT中国 → 编程开发JavaScript → 文章内容

用javascript拖动DIV层

作者:佚名 来源:本站整理 发布时间:2008-6-3 21:58:34
<html>
<body>  
<style>
body{font-family:Verdana;font-size:11px;color:#333;}
#win1{[position:absolute;left:100;top:100;width:200px;height:150px;border:1px solid #000;}
.title{width:100%;background:#000;height:18px;color:#fff;cursor: move;}  
</style>
  
<script>
var move=false;  
function StartDrag(obj)                        
{
if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")
{
  obj.setCapture();
  obj.style.background="#999";
  move=true;
  }  
}

function Drag(obj)                    
{
if(move)
{
  var oldwin=obj.parentNode;
  oldwin.style.left=event.clientX-100;
  oldwin.style.top=event.clientY-10;
}
  
}

function StopDrag(obj)
{
  obj.style.background="#000";
  obj.releaseCapture();
  move=false;
  }  

</script>  

<div id="win1">
<div class="title" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)" >窗口1</div>
This is a moveable window.<br>
Moreinfo in www.achome.cn  .
</div>

</body>  
</html>

  • 打印文档
  • 推荐好友
  • 返回顶部
  • 增大字体
  • 减少字体
关于本站 | 工作机会 | 合作网站 | 广告服务 | 市场合作| 联系我们 | 抽奖活动
版权所有: 武汉威俊科技有限公司 Copyright 2005-2007 www.ITCNW.COM All rights reserved