原生JS實現可拖拽登錄框
本文分享一個用原生JS實現的可拖拽登錄框，效果如下：
實現的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實現可拖拽登錄框</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;
/* 關閉登錄框的圖標 */
background: url(images/1.png) no-repeat;
cursor: pointer;
}
.ui-dialog-closebutton:hover {
/* 關閉登錄框鼠標懸停時的圖標 */
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 {
/* 輸入用戶名的圖標 */
background: url(images/4.png) no-repeat 2px;
}
.ui-dialog-input-password {
/* 輸入密碼的圖標 */
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();" rel="external nofollow" >登錄</a>
</div>
<!-- 設置一個背景遮罩層,防止鼠標選中事件 -->
<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();" rel="external nofollow" ></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="手機/郵箱/用戶名" />
</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >忘記密碼</a>
</div>
<div>
<a class="ui-dialog-submit" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登錄</a>
</div>
<div class="ui-dialog-l40">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >立即註冊</a>
</div>
</div>
</div>
<script type="text/javascript">
//聲明獲取元素對象方法
function $(id) { return document.getElementById(id); }
//聲明自動居中元素方法（el = Element）
function autoCenter(el) {
//獲得網頁可視區域的寬和高
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
//獲得傳入元素的實際寬和高
var elW = el.offsetWidth;
var elH = el.offsetHeight;
//設置元素的left為可視區域的寬度減去自身寬度的值除以2,top同理
el.style.left = (bodyW - elW) / 2 + 'px';
el.style.top = (bodyH - elH) / 2 + 'px';
}
//自動擴展元素到全部顯示區域
function fillToBody(el) {
//設置當前元素的寬度和高度為可視區域的寬和高
el.style.width = document.documentElement.clientWidth + 'px';
el.style.height = document.documentElement.clientHeight + 'px';
}
//設定鼠標在X和Y方向的初始值為0
var mouseOffsetX = 0;
var mouseOffsetY = 0;
//是否可拖拽的標記
var isDraging = false;
//鼠標事件1——計算鼠標相對拖拽元素的左上角的坐標，並且標記元素為可扡動
$('dialogDrag').addEventListener('mousedown', function (e) {
//兼容IE鼠標事件機制
var e = e || window.event;
//鼠標的偏移等於當前事件鼠標按下去的時候X 的坐標減去登錄浮層相對於頁面左邊的位置
mouseOffsetX = e.pageX - $('dialogMove').offsetLeft;
//鼠標的偏移等於當前事件鼠標按下去的時候Y的坐標減去登錄浮層相對於頁面頂邊的位置
mouseOffsetY = e.pageY - $('dialogMove').offsetTop;
//設置可拖動標記為true;
isDraging = true;
})
//鼠標事件2——鼠標移動時，檢測元素是否標記為可移動，
//如果是，則更新元素的位置，到當前鼠標的位置(要減去第一步中獲得的偏移)
document.onmousemove = function (e) {
//兼容IE鼠標事件機制
var e = e || window.event;
//獲取鼠標當前頁面(網頁左上角)的位置,e.pageX與e.pageY與鼠標按下時值不同
var mouseX = e.pageX;
var mouseY = e.pageY;
//記錄鼠標移動事件發生時的x坐標和y坐標
var moveX = 0;
var moveY = 0;
//如果當前可以拖動
if (isDraging === true) {
//拖動元素的位置等於鼠標相對於頁面位置減去鼠標相對於拖動元素左上角的位置
moveX = mouseX - mouseOffsetX;
moveY = mouseY - mouseOffsetY;
//獲取頁面最大寬度和最大高度(註意clientWidth和offsetWidth的區別)
var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
//浮層對象的寬度和高度
var dialogWidth = $('dialogMove').offsetWidth;
var dialogHeight = $('dialogMove').offsetHeight;
//計算可拖動的最大值
var maxX = pageWidth - dialogWidth;
var maxY = pageHeight - dialogHeight;
//做判斷，防止拖拽出允許范圍
moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY));
//設置拖動元素的新值
$('dialogMove').style.left = moveX + 'px';
$('dialogMove').style.top = moveY + 'px';
}
}
//鼠標事件3——鼠標松開的時候，標記元素為不可扡動
document.onmouseup = function () {
isDraging = false;
}
//展現登錄框
function showDialog() {
$('dialogMove').style.display = 'block';
$('mask').style.display = 'block';
//登錄框居中顯示
autoCenter($('dialogMove'));
//設置遮罩層充滿顯示區域
fillToBody($('mask'))
}
//隱藏登錄框
function hideDialog() {
$('dialogMove').style.display = 'none';
$('mask').style.display = 'none';
}
//當改變窗口大小時的處理函數
window.onresize = function () {
//登錄框居中顯示
autoCenter($('dialogMove'));
//如果登錄框顯示就執行遮罩層顯示函數
if ($('dialogMove').style.display === 'block') {
fillToBody($('mask'))
}
}
</script>
</body>
</html>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。
推薦閱讀：
- JavaScript實現div的鼠標拖拽效果
- 基於javascript實現移動端輪播圖效果
- js實現控制整個頁面滾動條的位置
- JavaScript實現六種網頁圖片輪播效果詳解
- JavaScript超詳細實現網頁輪播圖