拖动登录框 HTML+CSS+js
先上效果
在这里插入图片描述
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖动登录框</title>
<Style>
* {
margin: 0px;
padding: 0px;
}
a {
color: black;
text-decoration: none;
}
.one {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
.login {
display: none;
position: fixed;
width: 512px;
height: 280px;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 999;
transform: translate(-50%,-50%);
}
.title {
position: relative;
height: 40px;
width: 100%;
line-height: 40px;
font-size: 18px;
text-align: center;
cursor: move;
}
.title a{
position: absolute;
font-size: 12px;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
border: 1px solid #666;
border-radius: 15px;
text-align: center;
line-height: 30px;
background-color: white;
}
.con {
margin-top: 20px;
}
.login-input input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb solid 1px;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .3);
}
.button a {
display: block;
}
.button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
</Style>
</head>
<body>
<div class="one"><a href="javascript:;">点击，弹出登录框</a></div>
<div class="login">
<div class="title">登录会员
<span><a href="javascript:;" id="close">关闭</a></span>
</div>
<div class="con">
<div class="login-input">
<label>用户名:</label>
<input type="text" placeholder="请输入用户名" name="" id="name">
</div>
<div class="login-input">
<label>登录密码:</label>
<input type="text" placeholder="请输入登录密码" name="" id="code">
</div>
<div class="button">
<a href="javascript:;">登录会员</a>
</div>
</div>
</div>
<div class="bg"></div>
<script>
var one = document.querySelector('.one');
var login = document.querySelector('.login');
var bg = document.querySelector('.bg');
//点击弹出背景和登录框
one.addEventListener('click',function(){
login.style.display = 'block';
bg.style.display = 'block';
})
//点击关闭，隐藏背景和登录框
var close = document.querySelector('#close');
close.addEventListener('click',function(){
login.style.display = 'none';
bg.style.display = 'none';
})
var title = document.querySelector('.title');
//拖拽事件
title.addEventListener('mousedown',function(e){
//鼠标按下时，获取鼠标在盒子内的坐标
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
console.log(x);
console.log(y);
//鼠标移动时，把鼠标在页面中的坐标减去鼠标在盒子内的坐标就是left和top值
document.addEventListener('mousemove',move);
function move(e){
login.style.left = e.pageX - x +'px';//返回值不带单位
login.style.top = e.pageY - y + 'px';
}
//鼠标弹起，事件移除
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move);
})
})
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021/02/04 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
