第三次作业

要求:使用JS实现一个网页中登录窗口的显示(隐藏),页面中拖动移动,并且添加了边界判断的网页效果。

实现代码:

<!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 + "px";
let loginY = mouseY - offsetY + "px";
// 给登录窗口设置样式
_login_box.style.left = loginX;
_login_box.style.top = loginY;
}
}
// 鼠标按键抬起事件:什么都不做
document.onmouseup = function () {
// 清除了标题上的鼠标移动事件 - 什么都不做
_header.onmousemove = null;
}
</script>
</body>
</html>

效果图展示:

相关推荐
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木6 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷7 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript