星空网 > 软件开发 > Java

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弹出可以拖动的窗口代码实例

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流