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>

相关推荐
蔗理苦1 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro2 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹2 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风2 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱2 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年2 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵2 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_2 小时前
分片上传-
前端·javascript·状态模式
东北南西2 小时前
手写React状态hook
前端·javascript·react.js
诗书画唱2 小时前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript