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>

相关推荐
GIS之路8 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千11 分钟前
重学React(二):添加交互
javascript·react.js·交互
烛阴16 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥20 分钟前
HTML之表单结构全解析
前端·html
qq_5895681029 分钟前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记31 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er43 分钟前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~1 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript