web前端|js教程
js 可拖动 登录框
web前端-js教程
实现原理
卡密社区源码2.0带分站,VScode显示单个页面,ubuntu硬盘克隆,安装测试tomcat,sqlite创建文件命令,微信多开插件,vue是新的前端框架吗,怎样用爬虫选基金,php压缩html,秦淮seo首页优化,网站后台html5模板,关闭网页悬浮广告,网购优惠券模板源码lzw
1.onmousemove事件触发时不断更新鼠标的pageXY改变位置，
扒别人网站源码,ubuntu安装vuda,配置了2个tomcat,浴室有爬虫,php100从入门到精通,深泽上门seo技术市场报价lzw
登陆框的偏移量=鼠标当前位置-鼠标到登录框边框的距离
心水论坛源码,ubuntu升级g,怎么创建新的tomcat,爬虫页面提取,php5.3下载安装,潍坊seo关键词优化合作lzw
2.onmousedown鼠标摁下时触发事件获取鼠标到登陆框的距离，再设置true允许拖拽
3.onmouseup 鼠标弹起设置false停止拖拽
4.登录框居中显示公式：(可视区域宽高-登录框宽高)/2
5.当浏览器窗口大小变化时触发事件window.onresize 再更新登陆框居中显示
代码中有详细的注释
完整代码
--><!--
登录百度账号x
--> 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=
登录百度账号+x+
+
+
+\+
+
+\+
+
+\+
+
; 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(patMode=="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(cwidth-lwidth)){ loginL=cwidth-lwidth; } 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(); } }
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！
更多原生js实现可拖动的登录框效果相关文章请关注PHP中文网！
如果觉得《原生js实现可拖动的登录框效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
