原生js实现可拖动的登录框效果
实现原理
1.onmousemove事件触发时不断更新鼠标的pageXY改变位置,
登陆框的偏移量=鼠标当前位置-鼠标到登录框边框的距离
2.onmousedown鼠标摁下时触发事件获取鼠标到登陆框的距离,再设置true允许拖拽
3.onmouseup鼠标弹起设置false停止拖拽
4.登录框居中显示公式:(可视区域宽高-登录框宽高)/2
5.当浏览器窗口大小变化时触发事件window.onresize再更新登陆框居中显示
代码中有详细的注释
完整代码
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-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.5tahoma,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:couriernew,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:0auto; 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:1pxsolid#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:15px20px;} .user{margin-bottom:15px;} .password{margin-bottom:15px;} .pt{display:block; height:38px; padding-left:15px; border:1pxsolid#ddd; transition:.3s; font-size:14px; color:#666; width:343px; } .sm{display:block; height:48px; border:1pxsolid#ddd; transition:.3s; font-size:16px; color:#666; width:360px; background:#3b7ae3; color:#fff;} </style> </head> <body> <!--<divid="mask"></div>--> <buttonid="btn"href="">登录</button> <!--<divclass="login"id="login"> <divclass="title"id="title">登录百度账号<ahref="#"class="close">x</a></div> <divclass="content"> <divclass="user"><inputclass="pt"type="input"value="手机/邮箱/用户名"></div> <divclass="password"><inputclass="pt"type="input"value="密码"></div> <divclass="submit"><inputclass="sm"type="submit"value="登录"></div> </div> </div>--> <scripttype="text/javascript"> functionb(){ //创建遮罩层div并插入body varmask=document.createElement("div"); mask.id="mask"; mask.style.height=cheight+"px"; //宽度直接用100%在样式里 document.body.appendChild(mask); //创建登录层div并插入body varlogin=document.createElement("div"); login.id="login"; login.innerHTML='<divclass="title"id="title">登录百度账号'+'<ahref="#"class="close">x</a>'+'</div>'+ '<divclass="content">'+'<divclass="user">'+'<inputclass="pt"type="input"value="手机/邮箱/用户名">'+'</div>'+'<divclass="password">'+'<inputclass="pt"type="input"value="密码">'+'</div>'+'<divclass="submit">'+'<inputclass="sm"type="submit"value="登录">'+'</div>'+'</div>'; document.body.appendChild(login); //窗口可视区域宽度 varcwidth=document.documentElement.clientWidth||document.body.clientWidth; //窗口可视区域高度 varcheight=document.documentElement.clientHeight||document.body.clientHeight; //登录框宽度 varlwidth=login.offsetWidth; //登录框高度 varlheight=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"; } //获取拖拽容器 vartitle=document.getElementById("title"); varisDraging=false; varmouseOffsetX; varmouseOffsetY; //鼠标按下事件 title.onmousedown=function(e){ vare=e||window.event; /*varel=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){ vare=e||window.event; //鼠标移动时的坐标 varnewMX=e.pageX; varnewMY=e.pageY; //判断为true时可以拖拽 if(isDraging===true){ //登录框的偏移值=当前位置-鼠标到登录框的距离 varloginL=newMX-mouseOffsetX; varloginT=newMY-mouseOffsetY; //如果lefttop值超过边缘时就让他等于边缘 if(loginL<0){ loginL=0; }elseif(loginL>(cwidth-lwidth)){ loginL=cwidth-lwidth; } if(loginT<0){ loginT=0; }elseif(loginT>(cheight-lheight)){ loginT=cheight-lheight; } login.style.left=loginL+"px"; login.style.top=loginT+"px"; } } //鼠标弹起时设置为不可拖拽 document.onmouseup=function(){ isDraging=false; } //点击X关闭登录框和弹出层 varclose=login.getElementsByClassName("close")[0]; close.onclick=function(){ document.body.removeChild(mask); document.body.removeChild(login); } } //点击登录弹出登录框和弹出层 window.onload=function(){ varbtn=document.getElementById("btn"); btn.onclick=function(){ b(); } } </script> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!