實現原理
1.onmousemove事件觸發時不斷更新鼠標的pageXY改變位置，
登陸框的偏移量=鼠標當前位置-鼠標到登錄框邊框的距離
2.onmousedown鼠標摁下時觸發事件獲取鼠標到登陸框的距離，再設置true允許拖拽
3.onmouseup 鼠標彈起設置false停止拖拽
4.登錄框居中顯示公式：(可視區域寬高-登錄框寬高)/2
5.當瀏覽器窗口大小變化時觸發事件window.onresize 再更新登陸框居中顯示
代碼中有詳細的注釋
完整代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>demo</title><style>body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,/5b8b/4f53;}h1,h2,h3,h4,h5,h6{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}small{font-size:12px;}ul,ol{list-style:none;}a{text-decoration:none;}a:hover{text-decoration:underline;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}legend{color:#000;}fieldset,img{border:0;}button,input,select,textarea{font-size:100%;}table{border-collapse:collapse;border-spacing:0;}.clear{clear: both;float: none;height: 0;overflow: hidden;}/*p{font-size: 100px;}*/#btn{width: 80px; height: 40px; background: #3b7ae3; margin:0 auto; display: block; cursor: pointer; border-style: none; color: #fff; font-size: 16px;}#mask{ background: #000; opacity: 0.75; filter: alpha(opacity=75); height: 1000px; width: 100%; position: absolute; left: 0; top: 0; z-index: 1000;}#login{position: absolute; top: 100px; left: 100px; width: 400px; height: auto; border:1px solid #d5d5d5; z-index: 1001; }.title{position: relative;background-color: #f7f7f7; cursor: move; height: 50px; line-height: 50px; font-size: 16px; color: #333; padding-left:30px;}.close{position: absolute; top:0; right: 10px; color: #ccc;}.content{background: #fff; padding: 15px 20px;}.user{margin-bottom: 15px;}.password{margin-bottom: 15px;}.pt{display: block; height: 38px; padding-left: 15px; border: 1px solid #ddd; transition: .3s; font-size: 14px; color: #666; width: 343px; }.sm{display: block; height: 48px; border: 1px solid #ddd; transition: .3s; font-size: 16px; color: #666; width: 360px; background: #3b7ae3; color: #fff;}</style> </head> <body> <!-- <div id="mask"></div> --> <button id="btn" href="">登錄</button> <!-- <div class="login" id="login"> <div class="title" id="title">登錄百度賬號<a href="#" class="close">x</a></div> <div class="content"> <div class="user"><input class="pt" type="input" value="手機/郵箱/用戶名"></div> <div class="password"><input class="pt" type="input" value="密碼"></div> <div class="submit"><input class="sm" type="submit" value="登錄"></div> </div> </div> --><script type="text/javascript"> function b(){ //創建遮罩層div并插入body var mask=document.createElement("div"); mask.id="mask"; mask.style.height=cheight+"px"; //寬度直接用100%在樣式里 document.body.appendChild(mask); //創建登錄層div并插入body var login=document.createElement("div"); login.id="login"; login.innerHTML='<div class="title" id="title">登錄百度賬號'+'<a href="#" class="close">x</a>'+'</div>'+ '<div class="content">'+'<div class="user">'+'<input class="pt" type="input" value="手機/郵箱/用戶名">'+'</div>'+'<div class="password">'+'<input class="pt" type="input" value="密碼">'+'</div>'+'<div class="submit">'+'<input class="sm" type="submit" value="登錄">'+'</div>'+'</div>'; document.body.appendChild(login); //窗口可視區域寬度 var cwidth= document.documentElement.clientWidth || document.body.clientWidth; //窗口可視區域高度 var cheight= document.documentElement.clientHeight || document.body.clientHeight; //登錄框寬度 var lwidth=login.offsetWidth; //登錄框高度 var lheight=login.offsetHeight; //設置登錄框的居中顯示 login.style.left=(cwidth-lwidth)/2+"px"; login.style.top=(cheight-lheight)/2+"px"; //設置遮罩層的高度 mask.style.height=cheight+"px"; //改變窗口大小后依然居中顯示 window.onresize=function(){ if(document.compatMode=="CSS1Compat"){ cwidth=document.documentElement.clientWidth;cheight=document.documentElement.clientHeight; }else{ cwidth=document.body.clientWidth; cheight=document.body.clientHeight; } login.style.left=(cwidth-lwidth)/2+"px"; login.style.top=(cheight-lheight)/2+"px"; mask.style.height=cheight+"px"; } //獲取拖拽容器 var title=document.getElementById("title"); var isDraging=false; var mouseOffsetX; var mouseOffsetY; //鼠標按下事件 title.onmousedown=function(e){ var e=e||window.event; /*var el=e.srcElement; if(!el){ el=e.target;//兼容火狐 }*/ //鼠標相對于登錄框的位置 mouseOffsetX=e.pageX-login.offsetLeft; mouseOffsetY=e.pageY-login.offsetTop; //鼠標摁下時為true isDraging=true; /*console.log(mouseOffsetY, mouseOffsetX)*/ } //鼠標移動事件 document.onmousemove=function(e){ var e=e||window.event; //鼠標移動時的坐標 var newMX=e.pageX; var newMY=e.pageY; //判斷為true時可以拖拽 if(isDraging===true){ //登錄框的偏移值=當前位置-鼠標到登錄框的距離 var loginL=newMX-mouseOffsetX; var loginT=newMY-mouseOffsetY; //如果left top值超過邊緣時就讓他等于邊緣 if(loginL<0){ loginL=0; }else if(loginL>(cwidth-lwidth)){ loginL=cwidth-lwidth; } if(loginT<0){ loginT=0; }else if(loginT>(cheight-lheight)){ loginT=cheight-lheight; } login.style.left=loginL+"px"; login.style.top=loginT+"px"; } } //鼠標彈起時設置為不可拖拽 document.onmouseup=function(){ isDraging=false; } //點擊X關閉登錄框和彈出層 var close=login.getElementsByClassName("close")[0]; close.onclick=function(){ document.body.removeChild(mask); document.body.removeChild(login); } } //點擊登錄彈出登錄框和彈出層 window.onload=function(){ var btn=document.getElementById("btn"); btn.onclick=function(){ b(); } }</script> </body> </html> 以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
