Native js implements draggable login box effect
实现原理
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中文网！
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What should I do if I encounter garbled code printing for front-end thermal paper receipts?
Apr 04, 2025 pm 02:42 PM
Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
Who gets paid more Python or JavaScript?
Apr 04, 2025 am 12:09 AM
There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.
How to merge array elements with the same ID into one object using JavaScript?
Apr 04, 2025 pm 05:09 PM
How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...
Is JavaScript hard to learn?
Apr 03, 2025 am 12:20 AM
Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.
How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website?
Apr 04, 2025 pm 05:36 PM
Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...
The difference in console.log output result: Why are the two calls different?
Apr 04, 2025 pm 05:12 PM
In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...
How to implement panel drag and drop adjustment function similar to VSCode in front-end development?
Apr 04, 2025 pm 02:06 PM
Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...
