第三次作业

最新推荐文章于 2025-10-01 20:58:28 发布

原创最新推荐文章于 2025-10-01 20:58:28 发布 · 801 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

第三次作业

代码

<!DOCTYPE html>

<head>

<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>

<span>欢迎访问OPENLAB EDU</span>

</div>

<div>

</div>

</div>

</header>

</div>

// 获取登录按钮

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>

实现图片