使用jquery的网站,域名站长工具,网页代理app,我的网站要换新域名如何做题目
本期作业 WEB第三次作业 请使用JS实一个网页中登录窗口的显示/隐藏#xff0c;页面中拖动移动#xff0c;并且添加了边界判断的网页效 代码图片 效果展示 代码
!DOCTYPE html
html langzh
head meta charsetUTF-8页面中拖动移动并且添加了边界判断的网页效 代码图片 效果展示 代码
!DOCTYPE html
html langzh
head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/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 classcontainer header div span欢迎访问OPENLAB EDU/span /div div span idlogin登录 /span span idregister注册/span /div div classlogin-box idlogin-box div classheader idheader span会员登录/span span idclose[关闭]/span /div /div /header /div script let _logindocument.getElementById(login); let _login_boxdocument.getElementById(login-box); _login.οnclickfunction() { _login_box.style.display block; } let _closedocument.getElementById(close); _close.οnclickfunction( ){ _login_box.style.displaynone; } let _headerdocument.getElementById(header); document.οnmοusedοwn function(event){ let offsetX event.offsetX; let offsetY event.offsetY; _header.οnmοusemοvefunction(event2){ let mouseXevent2.clientX; let mouseYevent2.clientY; let loginXmouseX-offsetX; let loginY mouseY-offsetY; if(loginX0){ loginX0; } if (loginY 0) { loginY0; } let iWwindow.innerWidth; let lwgetComputedStyle(_login_box).width; lwparseInt(lw); if(loginX (iW-lw)) { loginXiW-lw; } let ih window.innerHeight; let lh getComputedStyle(_login_box).height; lh parseInt(lh); if(loginY (ih-lh)) { loginYih-lh; } _login_box.style.leftloginX px; _login_box.style.toploginY px; } } document.οnmοuseupfunction(){ _header.οnmοusemοvenull; } /script
/body
/html
