<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
}
.container{
width:100%;
height:100%;
background-color:#f2f1f2;
}
header{
width:1200px;
height: 50px;
background-color: #fff;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
header div:nth-of-type(2){
display: flex;
gap:20px;
cursor: pointer;
}
header div:nth-of-type(2) span:hover{
font-weight:bolder;
color:red;
}
.login-box{
display:none;
overflow: hidden;
width:300px;
height: 200px;
background-color:#fff;
border:solid 1px orangered;
border-radius:8px;
box-shadow: rgba(255,0,0,0.5) 5px 5px 5px;
position: absolute;
left: 1150px;
top: 50px;
}
.login-box .header{
height:40px;
background-color: orangered;
display:flex;
justify-content: space-between;
align-items: center;
color:white;
cursor: pointer;
padding:0 10px;
}
</style>
</head>
<body>
<div class="container">
<!-- 页头 -->
<!-- <div class="header"></div> -->
<!-- H5语义化标签，表示开发页头部分 -->
<header>
<div>
<span>欢迎访问OPENLAB EDU</span>
</div>
<div>
<span id="login">登录</span>
<span id="register">注册</span>
</div>
<!-- 登录框 -->
<div class="login-box" id="login-box">
<div class="header" id="header">
<span>会员登录</span>
<span id="close">[关闭]</span>
</div>
</div>
</header>
</div>
<script>
// 获取登录按钮
let _login = document.getElementById("login");
let _login_box = document.getElementById("login-box");
// 登录按钮添加事件
_login.onclick = function() {
// 显示弹窗
_login_box.style.display = "block";
}
// 获取关闭按钮
let _close = document.getElementById("close");
_close.onclick = function() {
// 隐藏弹窗
_login_box.style.display = "none";
}
// -------------------------------------------
// 获取登录窗口标题
let _header = document.getElementById("header");
// 文档中添加鼠标按下事件
document.onmousedown = function(event) {
// 获取鼠标指针在标题上的偏移量(事件函数默认参数：事件对象)
let offsetX = event.offsetX;
let offsetY = event.offsetY;
// 给窗口标题，添加鼠标移动的事件
_header.onmousemove = function(event2) {
// 鼠标移动，获取新的坐标
let mouseX = event2.clientX;
let mouseY = event2.clientY;
// 计算登录窗口坐标
let loginX = mouseX - offsetX;
let loginY = mouseY - offsetY;
// ----------------- 边界判断
// 左边界
if(loginX <= 0) {
loginX = 0;
}
// 上边界
if(loginY <=0) {
loginY = 0;
}
// 右边界
let iw = window.innerWidth; // 浏览器窗口宽度
let lw = getComputedStyle(_login_box).width; // 登录窗宽度
lw = parseInt(lw); // 转换数据类型
if(loginX >= (iw - lw)){
loginX = iw - lw;
}
// 下边界
let ih = window.innerHeight;
let lh = getComputedStyle(_login_box).height; // 登录窗高度
lh = parseInt(lh); // 转换数据类型
if(loginY >= (ih - lh)){
loginY = ih - lh;
}
// 给登录窗口设置样式
_login_box.style.left = loginX + "px";
_login_box.style.top = loginY + "px";
}
}
// 鼠标按键抬起事件：什么都不做
document.onmouseup = function() {
// 清除了标题上的鼠标移动事件 - 什么都不做
_header.onmousemove = null;
}
</script>
</body>
</html>