Native js implementiert den ziehbaren Login-Box-Effekt
实现原理
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>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！
更多原生js实现可拖动的登录框效果相关文章请关注PHP中文网！
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?
Mar 18, 2025 pm 03:12 PM
In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?
Mar 18, 2025 pm 03:14 PM
In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße?
Apr 04, 2025 pm 02:42 PM
Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...
Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?
Mar 18, 2025 pm 03:16 PM
In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.
Wie benutze ich Javas Sammlungsrahmen effektiv?
Mar 13, 2025 pm 12:28 PM
In diesem Artikel wird der effektive Gebrauch des Sammlungsrahmens von Java untersucht. Es betont die Auswahl geeigneter Sammlungen (Liste, Set, Karte, Warteschlange) basierend auf Datenstruktur, Leistungsanforderungen und Thread -Sicherheit. Optimierung der Sammlungsnutzung durch effizientes Gebrauch
Wie verwende ich Quellkarten zum Debuggen, um den JavaScript -Code zu debuggen?
Mar 18, 2025 pm 03:17 PM
In dem Artikel wird erläutert, wie Quellkarten zum Debuggen von JavaScript verwendet werden, indem er auf den ursprünglichen Code zurückgegeben wird. Es wird erläutert, dass Quellenkarten aktiviert, Breakpoints eingestellt und Tools wie Chrome Devtools und WebPack verwendet werden.
Erste Schritte mit Chart.js: Kuchen-, Donut- und Bubble -Diagramme
Mar 15, 2025 am 09:19 AM
In diesem Tutorial wird erläutert, wie man mit Diagramm.js Kuchen-, Ring- und Bubble -Diagramme erstellt. Zuvor haben wir vier Chart -Arten von Charts gelernt. Erstellen Sie Kuchen- und Ringdiagramme Kreisdiagramme und Ringdiagramme sind ideal, um die Proportionen eines Ganzen anzuzeigen, das in verschiedene Teile unterteilt ist. Zum Beispiel kann ein Kreisdiagramm verwendet werden, um den Prozentsatz der männlichen Löwen, weiblichen Löwen und jungen Löwen in einer Safari oder den Prozentsatz der Stimmen zu zeigen, die verschiedene Kandidaten bei der Wahl erhalten. Kreisdiagramme eignen sich nur zum Vergleich einzelner Parameter oder Datensätze. Es ist zu beachten, dass das Kreisdiagramm keine Entitäten ohne Wert zeichnen kann, da der Winkel des Lüfters im Kreisdiagramm von der numerischen Größe des Datenpunkts abhängt. Dies bedeutet jede Entität ohne Anteil
Wer bekommt mehr Python oder JavaScript bezahlt?
Apr 04, 2025 am 12:09 AM
Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.
