javascript弹出可以拖动的窗口代码范例

javascript弹出可以拖动的窗口代码实例

javascript弹出可以拖动的窗口代码实例:

在很多网页效果中，点击网页的某个地方能够弹出一个窗口，并且能够在屏幕中随便拖动，非常的人性化，下面就是一段能够实现此功能的代码实例，希望能够对大家带来帮助，代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51texiao.cn/" />
<title>可以拖动的弹出窗口-蚂蚁部落</title> 
<style type="text/css"> 
#popDiv  
{ 
  position:absolute; 
  visibility:hidden; 
  overflow:hidden; 
  border:2px solid #AEBBCA; 
  background-color:#EEF1F8; 
  cursor:move; 
  padding:1px; 
} 
#popTitle  
{ 
  background:#9DACBF; 
  height:20px; 
  line-height:20px; 
  padding:1px; 
} 
#popForm  
{ 
  padding:2px; 
} 
.title_left  
{ 
  font-weight:bold; 
  padding-left:5px; 
  float:left; 
} 
.title_right  
{ 
  float:right; 
} 
#popTitle .title_right a  
{ 
  color:#000; 
  text-decoration:none; 
} 
#popTitle .title_right a:hover  
{ 
  text-decoration:underline; 
  color:#FF0000; 
} 
</style> 
<script>  
function showPopup() //弹出层  
{ 
  var objDiv=document.getElementById("popDiv");  
  objDiv.style.top="50px";//设置弹出层距离上边界的距离  
  objDiv.style.left="200px";//设置弹出层距离左边界的距离  
  objDiv.style.width="300px";//设置弹出层的宽度  
  objDiv.style.height="200px";//设置弹出层的高度  
  objDiv.style.visibility="visible";  
}  
function hidePopup()//关闭层   
{ 
  var objDiv=document.getElementById("popDiv");  
  objDiv.style.visibility="hidden";  
}  
</script> 
</head> 
<body> 
<div id="popDiv"> 
  <div id="popTitle"> <!-- 标题div -->
    <span class="title_left">修改操作</span>  
    <span class="title_right" onClick="hidePopup()"><a href="#">关闭</a></span>  
  </div> 
  <div id="popForm"></div> 
</div> 
<input name="" type="button" onClick="showPopup()" value="操作" /> 
<script type="text/javascript">  
var objDiv=document.getElementById("popDiv");  
var isIE=document.all?true:false;//判断浏览器类型  
document.onmousedown = function(evnt)//当鼠标左键按下后执行此函数   
{ 
  var evnt=evnt?evnt:event;  
  if(evnt.button == (document.all ? 1 : 0))  
  {  
    mouseD = true;//mouseD为鼠标左键状态标志，为true时表示左键被按下  
  }  
}  
objDiv.onmousedown = function(evnt)  
{  
  objDrag=this;//objDrag为拖动的对象  
  var evnt=evnt?evnt:event;  
  if(evnt.button == (document.all?1 : 0))  
  {  
    mx=evnt.clientX;  
    my=evnt.clientY;  
    objDiv.style.left=objDiv.offsetLeft+"px";  
    objDiv.style.top=objDiv.offsetTop+"px";  
    if(isIE)  
    {  
      objDiv.setCapture();  
    }  
    else  
    {  
      window.captureEvents(Event.MOUSEMOVE); 
    }  
  }  
}  
document.onmouseup=function()  
{  
  mouseD=false; 
  objDrag="";  
  if(isIE)  
  {  
    objDiv.releaseCapture();  
  }  
  else  
  {  
    window.releaseEvents(objDiv.MOUSEMOVE); 
  }  
} 
document.onmousemove=function(evnt) 
{  
  var evnt=evnt?evnt:event;  
  if(mouseD==true&&objDrag)  
  {  
    var mrx=evnt.clientX-mx;  
    var mry=evnt.clientY-my;  
    objDiv.style.left = parseInt(objDiv.style.left) + mrx + "px";  
    objDiv.style.top = parseInt(objDiv.style.top) + mry + "px";  
    mx = evnt.clientX;  
    my = evnt.clientY;  
  }  
}  
</script> 
</body> 
</html>

原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0520/1995.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8545

javascript弹出可以拖动的窗口代码范例

相关推荐