web前端第三次作业

题目

本期作业

WEB第三次作业

请使用JS实一个网页中登录窗口的显示/隐藏,页面中拖动移动,并且添加了边界判断的网页效

代码图片

效果展示

代码

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

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

<title>Document</title>

</head>

<style>

*{

margin: 0;padding: 0;box-sizing: border-box;}

html,body{width: 100%;height: 100%;}

.container{width: 100%;height: 100%;background-color: #f2f1f2f2;}

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

<body>

<div class="container">

<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.οnclick=function() {

_login_box.style.display ="block";

}

let _close=document.getElementById("close");

_close.οnclick=function( ){

_login_box.style.display="none";

}

let _header=document.getElementById("header");

document.οnmοusedοwn= function(event){

let offsetX =event.offsetX;

let offsetY =event.offsetY;

_header.οnmοusemοve=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.οnmοuseup=function(){

_header.οnmοusemοve=null;

}

</script>

</body>

</html>

相关推荐
惊鸿2873 分钟前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端
蓝翔认证10级掘手8 分钟前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
做梦都在学习前端10 分钟前
发布一个monaco-editor 汉化包
前端·npm·vite
石小石Orz26 分钟前
为什么推荐前端学习油猴脚本开发?
前端
珵煜ini29 分钟前
wd-button组件阻止事件冒泡的
前端
炒毛豆30 分钟前
vue3.4中的v-model的用法~
前端·vue.js
用户408128120038130 分钟前
大文件分片上传和断点续传
前端
极客悟道31 分钟前
颠覆传统虚拟化:在Docker容器中运行Windows系统的开源黑科技
前端·后端
前端康师傅32 分钟前
JavaScript 中你不知道的按位运算
前端·javascript
小桥风满袖34 分钟前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js