原生js實作可拖曳的登入框效果-js教程-PHP中文網

首頁

web前端

js教程

原生js實作可拖曳的登入框效果

高洛峰

Feb 08, 2017 pm 05:19 PM

实现原理

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中文网！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7488

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何創建和發布自己的JavaScript庫？ Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能？ Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

如何使用瀏覽器開發人員工具有效調試JavaScript代碼？ Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。

如何有效地使用Java的收藏框架？ Mar 13, 2025 pm 12:28 PM

本文探討了Java收藏框架的有效使用。它強調根據數據結構，性能需求和線程安全選擇適當的收集（列表，設置，地圖，隊列）。通過高效優化收集用法

如何使用源地圖調試縮小JavaScript代碼？ Mar 18, 2025 pm 03:17 PM

本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。

開始使用Chart.js：PIE，DONUT和BUBBLE圖表 Mar 15, 2025 am 09:19 AM

本教程將介紹如何使用 Chart.js 創建餅圖、環形圖和氣泡圖。此前，我們已學習了 Chart.js 的四種圖表類型：折線圖和條形圖（教程二），以及雷達圖和極地區域圖（教程三）。創建餅圖和環形圖餅圖和環形圖非常適合展示某個整體被劃分為不同部分的比例。例如，可以使用餅圖展示野生動物園中雄獅、雌獅和幼獅的百分比，或不同候選人在選舉中獲得的投票百分比。餅圖僅適用於比較單個參數或數據集。需要注意的是，餅圖無法繪製值為零的實體，因為餅圖中扇形的角度取決於數據點的數值大小。這意味著任何占比為零的實體

誰得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

See all articles

原生js實作可拖曳的登入框效果

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題