javascript pop-up glisser window_javascript compétences-js tutoriel-php.cn

javascript pop-up glisser window_javascript compétences

WBOY

Libérer： 2016-05-16 15:45:55

original

1377 Les gens l'ont consulté

Des fenêtres contextuelles déplaçables peuvent être vues sur de nombreuses pages Web. Elles sont très conviviales. La fenêtre contextuelle de déplacement peut être réalisée via un morceau de code javascript ci-dessous, sans plus tarder, je vais coller le code directement. .

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.jb51.net/" />
<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&#63;true:false;//判断浏览器类型 
document.onmousedown = function(evnt)//当鼠标左键按下后执行此函数 
{ 
 var evnt=evnt&#63;evnt:event; 
 if(evnt.button == (document.all &#63; 1 : 0)) 
 { 
 mouseD = true;//mouseD为鼠标左键状态标志，为true时表示左键被按下 
 } 
} 
objDiv.onmousedown = function(evnt) 
{ 
 objDrag=this;//objDrag为拖动的对象 
 var evnt=evnt&#63;evnt:event; 
 if(evnt.button == (document.all&#63;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&#63;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>

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article pour implémenter une fenêtre de glissement contextuelle javascript. J'espère que cela sera utile à tout le monde.