原生js实现可拖动的登录框效果
实现原理
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中文网！
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?
Mar 18, 2025 pm 03:14 PM
Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?
Mar 18, 2025 pm 03:16 PM
Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.
Bagaimana saya menggunakan kerangka koleksi Java dengan berkesan?
Mar 13, 2025 pm 12:28 PM
Artikel ini meneroka penggunaan rangka koleksi Java yang berkesan. Ia menekankan memilih koleksi yang sesuai (senarai, set, peta, giliran) berdasarkan struktur data, keperluan prestasi, dan keselamatan benang. Mengoptimumkan penggunaan pengumpulan melalui cekap
Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified?
Mar 18, 2025 pm 03:17 PM
Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.
Bermula dengan Chart.js: Pie, Donut, dan Carta Bubble
Mar 15, 2025 am 09:19 AM
Tutorial ini akan menerangkan cara membuat carta pai, cincin, dan gelembung menggunakan carta.js. Sebelum ini, kami telah mempelajari empat jenis carta carta.js: carta baris dan carta bar (tutorial 2), serta carta radar dan carta rantau polar (Tutorial 3). Buat carta pai dan cincin Carta pai dan carta cincin sangat sesuai untuk menunjukkan perkadaran keseluruhan yang dibahagikan kepada bahagian yang berlainan. Sebagai contoh, carta pai boleh digunakan untuk menunjukkan peratusan singa lelaki, singa wanita dan singa muda dalam safari, atau peratusan undi yang diterima oleh calon yang berbeza dalam pilihan raya. Carta pai hanya sesuai untuk membandingkan parameter tunggal atau dataset. Harus diingat bahawa carta pai tidak dapat menarik entiti dengan nilai sifar kerana sudut kipas dalam carta pai bergantung pada saiz berangka titik data. Ini bermaksud mana -mana entiti dengan perkadaran sifar
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
