实现原理
1.onmousemove事件触发时不断更新鼠标的pageXY改变位置,
登陆框的偏移量=鼠标当前位置-鼠标到登录框边框的距离
2.onmousedown鼠标摁下时触发事件获取鼠标到登陆框的距离,再设置true允许拖拽
3.onmouseup 鼠标弹起设置false停止拖拽
4.登录框居中显示公式:(可视区域宽高-登录框宽高)/2
5.当浏览器窗口大小变化时触发事件window.onresize 再更新登陆框居中显示
代码中有详细的注释
完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo</title> <style> body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier new,courier,monospace;} small{font-size:12px;} ul,ol{list-style:none;} a{text-decoration:none;} a:hover{text-decoration:underline;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} .clear{clear: both;float: none;height: 0;overflow: hidden;} /*p{font-size: 100px;}*/ #btn{width: 80px; height: 40px; background: #3b7ae3; margin:0 auto; display: block; cursor: pointer; border-style: none; color: #fff; font-size: 16px;} #mask{ background: #000; opacity: 0.75; filter: alpha(opacity=75); height: 1000px; width: 100%; position: absolute; left: 0; top: 0; z-index: 1000; } #login{position: absolute; top: 100px; left: 100px; width: 400px; height: auto; border:1px solid #d5d5d5; z-index: 1001; } .title{position: relative;background-color: #f7f7f7; cursor: move; height: 50px; line-height: 50px; font-size: 16px; color: #333; padding-left:30px;} .close{position: absolute; top:0; right: 10px; color: #ccc;} .content{background: #fff; padding: 15px 20px;} .user{margin-bottom: 15px;} .password{margin-bottom: 15px;} .pt{display: block; height: 38px; padding-left: 15px; border: 1px solid #ddd; transition: .3s; font-size: 14px; color: #666; width: 343px; } .sm{display: block; height: 48px; border: 1px solid #ddd; transition: .3s; font-size: 16px; color: #666; width: 360px; background: #3b7ae3; color: #fff;} </style> </head> <body> <!-- <div id="mask"></div> --> <button id="btn" href="">登录</button> <!-- <div class="login" id="login"> <div class="title" id="title">登录百度账号<a href="#" class="close">x</a></div> <div class="content"> <div class="user"><input class="pt" type="input" value="手机/邮箱/用户名"></div> <div class="password"><input class="pt" type="input" value="密码"></div> <div class="submit"><input class="sm" type="submit" value="登录"></div> </div> </div> --> <script type="text/javascript"> function b(){ //创建遮罩层div并插入body var mask=document.createElement("div"); mask.id="mask"; mask.style.height=cheight+"px"; //宽度直接用100%在样式里 document.body.appendChild(mask); //创建登录层div并插入body var login=document.createElement("div"); login.id="login"; login.innerHTML='<div class="title" id="title">登录百度账号'+'<a href="#" class="close">x</a>'+'</div>'+ '<div class="content">'+'<div class="user">'+'<input class="pt" type="input" value="手机/邮箱/用户名">'+'</div>'+'<div class="password">'+'<input class="pt" type="input" value="密码">'+'</div>'+'<div class="submit">'+'<input class="sm" type="submit" value="登录">'+'</div>'+'</div>'; document.body.appendChild(login); //窗口可视区域宽度 var cwidth= document.documentElement.clientWidth || document.body.clientWidth; //窗口可视区域高度 var cheight= document.documentElement.clientHeight || document.body.clientHeight; //登录框宽度 var lwidth=login.offsetWidth; //登录框高度 var lheight=login.offsetHeight; //设置登录框的居中显示 login.style.left=(cwidth-lwidth)/2+"px"; login.style.top=(cheight-lheight)/2+"px"; //设置遮罩层的高度 mask.style.height=cheight+"px"; //改变窗口大小后依然居中显示 window.onresize=function(){ if(document.compatMode=="CSS1Compat"){ cwidth=document.documentElement.clientWidth; cheight=document.documentElement.clientHeight; }else{ cwidth=document.body.clientWidth; cheight=document.body.clientHeight; } login.style.left=(cwidth-lwidth)/2+"px"; login.style.top=(cheight-lheight)/2+"px"; mask.style.height=cheight+"px"; } //获取拖拽容器 var title=document.getElementById("title"); var isDraging=false; var mouseOffsetX; var mouseOffsetY; //鼠标按下事件 title.onmousedown=function(e){ var e=e||window.event; /*var el=e.srcElement; if(!el){ el=e.target;//兼容火狐 }*/ //鼠标相对于登录框的位置 mouseOffsetX=e.pageX-login.offsetLeft; mouseOffsetY=e.pageY-login.offsetTop; //鼠标摁下时为true isDraging=true; /*console.log(mouseOffsetY, mouseOffsetX)*/ } //鼠标移动事件 document.onmousemove=function(e){ var e=e||window.event; //鼠标移动时的坐标 var newMX=e.pageX; var newMY=e.pageY; //判断为true时可以拖拽 if(isDraging===true){ //登录框的偏移值=当前位置-鼠标到登录框的距离 var loginL=newMX-mouseOffsetX; var loginT=newMY-mouseOffsetY; //如果left top值超过边缘时就让他等于边缘 if(loginL<0){ loginL=0; }else if(loginL>(cwidth-lwidth)){ loginL=cwidth-lwidth; } if(loginT<0){ loginT=0; }else if(loginT>(cheight-lheight)){ loginT=cheight-lheight; } login.style.left=loginL+"px"; login.style.top=loginT+"px"; } } //鼠标弹起时设置为不可拖拽 document.onmouseup=function(){ isDraging=false; } //点击X关闭登录框和弹出层 var close=login.getElementsByClassName("close")[0]; close.onclick=function(){ document.body.removeChild(mask); document.body.removeChild(login); } } //点击登录弹出登录框和弹出层 window.onload=function(){ var btn=document.getElementById("btn"); btn.onclick=function(){ b(); } } </script> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年09月24日
2024年09月24日
- 韩红2005-精选[首版][WAV+CUE]
- 张敬轩.2004-A.M/P.M【几何文化】【WAV+CUE】
- 范文芳1999-真心话电影原声带[HYPE][WAV+CUE]
- 袁培华.1990-我写不出一首情歌给我最爱的你【可登】【WAV+CUE】
- 群星.2007-歌林10年流行岁月12CD【歌林】【WAV+CUE】
- 软硬天师.2006-LONG.TIME.NO.SEE【金牌大风】【WAV+CUE】
- 卓依娜姆《美人谋 网剧影视原声带》[FLAC/分轨][162.27MB]
- 国风大师纯音系列《蒋倩 :古筝演奏家》1CD[MP3][160.7MB]
- 国风大师纯音系列《王中山古筝》1CD[MP3][519MB]
- 徐玮1986-走自己的路[台湾复刻版][WAV+CUE]
- 黄思婷2004-情缘[豪记唱片][WAV+CUE]
- 群星《左耳·听见爱情》星文唱片[WAV+CUE]
- 陈美玲.1987-孤单的心【EMI百代】【WAV+CUE】
- 黄乙玲.2005-甲你作伴【亚律音乐】【WAV+CUE】
- 张雨生.1997-口是心非【丰华】【WAV+CUE】