Heim > Artikel > Web-Frontend > Native js implementiert den ziehbaren Login-Box-Effekt

Native js implementiert den ziehbaren Login-Box-Effekt

高洛峰Original: 2017-02-08 17:19:251214Durchsuche

实现原理

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=&#39;<div class="title" id="title">登录百度账号&#39;+&#39;<a href="#" class="close">x</a>&#39;+&#39;</div>&#39;+
 &#39;<div class="content">&#39;+&#39;<div class="user">&#39;+&#39;<input class="pt" type="input" value="手机/邮箱/用户名">&#39;+&#39;</div>&#39;+&#39;<div class="password">&#39;+&#39;<input class="pt" type="input" value="密码">&#39;+&#39;</div>&#39;+&#39;<div class="submit">&#39;+&#39;<input class="sm" type="submit" value="登录">&#39;+&#39;</div>&#39;+&#39;</div>&#39;;
 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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！

更多原生js实现可拖动的登录框效果相关文章请关注PHP中文网！

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery implementiert den Drag-EffektNächster Artikel：jquery implementiert den Drag-Effekt

In Verbindung stehende Artikel

Mehr sehen