给我写一个可拖动悬浮输入框的web前端登录界面
时间: 2023-02-28 12:10:19 浏览: 60
当然,可以!以下是一个使用 HTML、CSS 和 JavaScript 编写的可拖动悬浮输入框的登录界面:
```
<!DOCTYPE html>
<html>
<head>
<style>
.login-box {
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.drag-header {
width: 100%;
height: 50px;
background-color: #ccc;
cursor: move;
}
.input-group {
padding: 20px;
}
.form-control {
width: 100%;
height: 40px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
padding-left: 10px;
}
.btn {
width: 100%;
height: 40px;
background-color: #4caf50;
color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-box">
<div class="drag-header"></div>
<form class="input-group">
<input type="text" class="form-control" placeholder="Username">
<input type="password" class="form-control" placeholder="Password">
<button class="btn">Submit</button>
</form>
</div>
<script>
let isDragging = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;
const dragHeader = document.querySelector(".drag-header");
const loginBox = document.querySelector(".login-box");
dragHeader.addEventListener("mousedown", dragStart);
dragHeader.addEventListener("mouseup", dragEnd);
dragHeader.addEventListener("mousemove", drag);
function dragStart(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
isDragging = true;
}
function dragEnd(e) {
isDragging = false;
}
function drag(e) {
if (isDragging) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, loginBox);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform