原生JS實(shí)現(xiàn)可拖拽登錄框
更新時(shí)間：2021年10月19日 11:47:24 作者：aiguangyuan
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)可拖拽登錄框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文分享一個(gè)用原生JS實(shí)現(xiàn)的可拖拽登錄框，效果如下：
實(shí)現(xiàn)的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實(shí)現(xiàn)可拖拽登錄框</title>
<style type="text/css">
body {
/* 背景圖 */
background: url(images/0.png) #fff top center no-repeat;
padding: 0px;
margin: 0px;
font-size: 12px;
font-family: "微軟雅黑";
}
.link {
text-align: right;
line-height: 20px;
padding-right: 40px;
}
.ui-dialog {
width: 380px;
height: auto;
display: none;
position: absolute;
z-index: 9000;
top: 0px;
left: 0px;
border: 1px solid #D5D5D5;
background: #fff;
}
.ui-dialog a {
text-decoration: none;
}
.ui-dialog-title {
height: 48px;
line-height: 48px;
padding: 0px 20px;
color: #535353;
font-size: 16px;
border-bottom: 1px solid #efefef;
background: #f5f5f5;
cursor: move;
user-select: none;
}
.ui-dialog-closebutton {
width: 16px;
height: 16px;
display: block;
position: absolute;
top: 12px;
right: 20px;
/* 關(guān)閉登錄框的圖標(biāo) */
background: url(images/1.png) no-repeat;
cursor: pointer;
}
.ui-dialog-closebutton:hover {
/* 關(guān)閉登錄框鼠標(biāo)懸停時(shí)的圖標(biāo) */
background: url(images/2.png);
}
.ui-dialog-content {
padding: 15px 20px;
}
.ui-dialog-pt15 {
padding-top: 15px;
}
.ui-dialog-l40 {
height: 40px;
line-height: 40px;
text-align: right;
}
.ui-dialog-input {
width: 100%;
height: 40px;
margin: 0px;
padding: 0px;
border: 1px solid #d5d5d5;
font-size: 16px;
color: #c1c1c1;
text-indent: 25px;
outline: none;
}
.ui-dialog-input-username {
/* 輸入用戶名的圖標(biāo) */
background: url(images/4.png) no-repeat 2px;
}
.ui-dialog-input-password {
/* 輸入密碼的圖標(biāo) */
background: url(images/3.png) no-repeat 2px;
}
.ui-dialog-submit {
width: 100%;
height: 50px;
background: #3b7ae3;
border: none;
font-size: 16px;
color: #fff;
outline: none;
text-decoration: none;
display: block;
text-align: center;
line-height: 50px;
}
.ui-dialog-submit:hover {
background: #3f81b0;
}
.ui-mask {
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0px;
height: 0px;
z-index: 8000;
opacity: 0.4;
/*兼容低版本的ie*/
filter: Alpha(opacity=40);
}
</style>
</head>
<body>
<div class="link">
<a href="javascript:showDialog();" >登錄</a>
</div>
<!-- 設(shè)置一個(gè)背景遮罩層,防止鼠標(biāo)選中事件 -->
<div class="ui-mask" id="mask" onselectstart="return false"></div>
<div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
<div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">
登錄通行證
<a class="ui-dialog-closebutton" href="javascript:hideDialog();" ></a>
</div>
<div class="ui-dialog-content">
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-username" type="input" value="手機(jī)/郵箱/用戶名" />
</div>
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-password" type="input" value="密碼" />
</div>
<div class="ui-dialog-l40">
<a href="#" >忘記密碼</a>
</div>
<div>
<a class="ui-dialog-submit" href="#" >登錄</a>
</div>
<div class="ui-dialog-l40">
<a href="#" >立即注冊(cè)</a>
</div>
</div>
</div>
<script type="text/javascript">
//聲明獲取元素對(duì)象方法
function $(id) { return document.getElementById(id); }
//聲明自動(dòng)居中元素方法（el = Element）
function autoCenter(el) {
//獲得網(wǎng)頁可視區(qū)域的寬和高
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
//獲得傳入元素的實(shí)際寬和高
var elW = el.offsetWidth;
var elH = el.offsetHeight;
//設(shè)置元素的left為可視區(qū)域的寬度減去自身寬度的值除以2,top同理
el.style.left = (bodyW - elW) / 2 + 'px';
el.style.top = (bodyH - elH) / 2 + 'px';
}
//自動(dòng)擴(kuò)展元素到全部顯示區(qū)域
function fillToBody(el) {
//設(shè)置當(dāng)前元素的寬度和高度為可視區(qū)域的寬和高
el.style.width = document.documentElement.clientWidth + 'px';
el.style.height = document.documentElement.clientHeight + 'px';
}
//設(shè)定鼠標(biāo)在X和Y方向的初始值為0
var mouseOffsetX = 0;
var mouseOffsetY = 0;
//是否可拖拽的標(biāo)記
var isDraging = false;
//鼠標(biāo)事件1——計(jì)算鼠標(biāo)相對(duì)拖拽元素的左上角的坐標(biāo)，并且標(biāo)記元素為可扡動(dòng)
$('dialogDrag').addEventListener('mousedown', function (e) {
//兼容IE鼠標(biāo)事件機(jī)制
var e = e || window.event;
//鼠標(biāo)的偏移等于當(dāng)前事件鼠標(biāo)按下去的時(shí)候X 的坐標(biāo)減去登錄浮層相對(duì)于頁面左邊的位置
mouseOffsetX = e.pageX - $('dialogMove').offsetLeft;
//鼠標(biāo)的偏移等于當(dāng)前事件鼠標(biāo)按下去的時(shí)候Y的坐標(biāo)減去登錄浮層相對(duì)于頁面頂邊的位置
mouseOffsetY = e.pageY - $('dialogMove').offsetTop;
//設(shè)置可拖動(dòng)標(biāo)記為true;
isDraging = true;
})
//鼠標(biāo)事件2——鼠標(biāo)移動(dòng)時(shí)，檢測(cè)元素是否標(biāo)記為可移動(dòng)，
//如果是，則更新元素的位置，到當(dāng)前鼠標(biāo)的位置(要減去第一步中獲得的偏移)
document.onmousemove = function (e) {
//兼容IE鼠標(biāo)事件機(jī)制
var e = e || window.event;
//獲取鼠標(biāo)當(dāng)前頁面(網(wǎng)頁左上角)的位置,e.pageX與e.pageY與鼠標(biāo)按下時(shí)值不同
var mouseX = e.pageX;
var mouseY = e.pageY;
//記錄鼠標(biāo)移動(dòng)事件發(fā)生時(shí)的x坐標(biāo)和y坐標(biāo)
var moveX = 0;
var moveY = 0;
//如果當(dāng)前可以拖動(dòng)
if (isDraging === true) {
//拖動(dòng)元素的位置等于鼠標(biāo)相對(duì)于頁面位置減去鼠標(biāo)相對(duì)于拖動(dòng)元素左上角的位置
moveX = mouseX - mouseOffsetX;
moveY = mouseY - mouseOffsetY;
//獲取頁面最大寬度和最大高度(注意clientWidth和offsetWidth的區(qū)別)
var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
//浮層對(duì)象的寬度和高度
var dialogWidth = $('dialogMove').offsetWidth;
var dialogHeight = $('dialogMove').offsetHeight;
//計(jì)算可拖動(dòng)的最大值
var maxX = pageWidth - dialogWidth;
var maxY = pageHeight - dialogHeight;
//做判斷，防止拖拽出允許范圍
moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY));
//設(shè)置拖動(dòng)元素的新值
$('dialogMove').style.left = moveX + 'px';
$('dialogMove').style.top = moveY + 'px';
}
}
//鼠標(biāo)事件3——鼠標(biāo)松開的時(shí)候，標(biāo)記元素為不可扡動(dòng)
document.onmouseup = function () {
isDraging = false;
}
//展現(xiàn)登錄框
function showDialog() {
$('dialogMove').style.display = 'block';
$('mask').style.display = 'block';
//登錄框居中顯示
autoCenter($('dialogMove'));
//設(shè)置遮罩層充滿顯示區(qū)域
fillToBody($('mask'))
}
//隱藏登錄框
function hideDialog() {
$('dialogMove').style.display = 'none';
$('mask').style.display = 'none';
}
//當(dāng)改變窗口大小時(shí)的處理函數(shù)
window.onresize = function () {
//登錄框居中顯示
autoCenter($('dialogMove'));
//如果登錄框顯示就執(zhí)行遮罩層顯示函數(shù)
if ($('dialogMove').style.display === 'block') {
fillToBody($('mask'))
}
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Javascript實(shí)現(xiàn)登錄框拖拽效果
- js實(shí)現(xiàn)登錄框鼠標(biāo)拖拽效果
- js實(shí)現(xiàn)百度登錄框鼠標(biāo)拖拽效果
- 百度Popup.js彈出框進(jìn)化版 拖拽小框架發(fā)布 兼容IE6/7/8,Firefox,Chrome
- javascript 網(wǎng)頁編輯框及拖拽圖片的問題
- js實(shí)現(xiàn)彈出框的拖拽效果實(shí)例代碼詳解
- 使用純JS實(shí)現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)
- JavaScript實(shí)現(xiàn)模態(tài)框拖拽效果
- HTML+CSS+JavaScript實(shí)現(xiàn)可拖拽模態(tài)框
- javascript實(shí)現(xiàn)登錄框拖拽
相關(guān)文章
這篇文章主要介紹了JavaScript中對(duì)于SPA單頁面的理解，單頁應(yīng)用SPA是一種網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)站的模型，它通過動(dòng)態(tài)重寫當(dāng)前頁面來與用戶交互2023-02-02
SPA的興起，促使我們更加關(guān)注與內(nèi)存相關(guān)的JavaScript編碼實(shí)踐。如果應(yīng)用使用的內(nèi)存越來越多，就會(huì)嚴(yán)重影響性能，甚至導(dǎo)致瀏覽器的崩潰。下面就來看看JavaScript中常見的內(nèi)存泄漏以及如何避免內(nèi)存泄漏2022-05-05
javascript判斷機(jī)器是否聯(lián)網(wǎng)的2種方法
只有機(jī)器已經(jīng)聯(lián)網(wǎng)以后，web應(yīng)用才能啟動(dòng)，下面使用javascript判斷機(jī)器是否聯(lián)網(wǎng)，具體判斷代碼如下，有此需求的朋友可以參考下2013-08-08
這篇文章主要為大家詳細(xì)介紹了Bootstrap 警告框（Alert）插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了利用JS生成博文目錄及CSS定制博客的相關(guān)資料,需要的朋友可以參考下2016-02-02
JSON一種簡(jiǎn)單的數(shù)據(jù)格式，比xml更輕巧，在JavaScript中處理JSON數(shù)據(jù)不需要任何特殊的API或工具包，下面為大家詳細(xì)介紹下js中的json對(duì)象2014-10-10
淺談JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序
本文主要介紹了JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序，結(jié)合實(shí)例代碼進(jìn)行了詳細(xì)的講解，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
一般來說中文亂碼用js結(jié)合escape來解決，但下面的方法是一般后臺(tái)中的一些問題，需要注意下輸出順序，先聲明編碼類型在輸出內(nèi)容是個(gè)好習(xí)慣。2009-12-12
JS對(duì)象屬性的檢測(cè)與獲取操作實(shí)例分析
這篇文章主要介紹了JS對(duì)象屬性的檢測(cè)與獲取操作,結(jié)合實(shí)例形式分析了JS針對(duì)ES5、ES6實(shí)現(xiàn)對(duì)象屬性的檢測(cè)與獲取常見操作技巧,需要的朋友可以參考下2020-03-03
在 UniApp中,自定義TabBar是指替換默認(rèn)的Tab欄以實(shí)現(xiàn)更多個(gè)性化的設(shè)計(jì),自定義 TabBar 可以通過創(chuàng)建一個(gè)新的組件來實(shí)現(xiàn),并在頁面中引用該組件,下面給大家介紹在uniapp中custombar的使用步驟,感興趣的朋友一起看看吧2024-05-05