web第三次作业

CSS样式

* {

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: 500px;

height: 300px;

background-color: #1fdec1;

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;

}

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<div class="container">

<header>

<div>

<span>登录后享受更多内容</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">X</span>

</div>

</div>

</header>

</div>

</body>

</html>

JS代码

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

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;

_login_box.style.top = loginY;

}

}

document.onmouseup = function() {

_header.onmousemove = null;

}</script>

相关推荐
Zuckjet_3 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801463 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店4 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown4 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy4 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip5 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿6 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
闭着眼睛学算法6 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴7 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.7 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js