溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
實現原理
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,h2,h3,h4,h5,h6,h7,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;}
h2,h3,h4,h5,h6,h7{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>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
