js實(shí)現(xiàn)登錄拖拽窗口
更新時(shí)間：2020年02月10日 12:10:07 作者：crazy的藍(lán)色夢(mèng)想
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)登錄拖拽窗口，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)登錄拖拽窗口的具體代碼，供大家參考，具體內(nèi)容如下
做這個(gè)案例的兩個(gè)關(guān)鍵點(diǎn)：
1、用js將盒子在可視區(qū)域居中顯示
本可以用css將盒子用定位的方式居中顯示，但是采用js的方法更好些。
方法：
盒子的left值 = （可視區(qū)域的寬度 - 盒子自身的寬度）/ 2;
盒子的top值 = （可視區(qū)域的高度 - 盒子自身的高度）/ 2;
這樣盒子就居中顯示
2、先鼠標(biāo)按下，然后鼠標(biāo)在整個(gè)文檔上移動(dòng)時(shí)，盒子的位置跟著鼠標(biāo)移動(dòng)
這一點(diǎn)上要注意的點(diǎn)：
1)鼠標(biāo)按下時(shí)，鼠標(biāo)相對(duì)盒子X(jué)方向的位置 = event.clienX- 盒子的offsetLeft
鼠標(biāo)相對(duì)盒子Y方向的位置 = event.clientY - 盒子的offsetTop ;
2)鼠標(biāo)在移動(dòng)時(shí)，盒子的left值 = event.clientX - 鼠標(biāo)相對(duì)盒子X(jué)方向的位置
盒子的top值 = event.clientY - 鼠標(biāo)相對(duì)盒子Y方向的位置
注意 1），2）中的event.clientX/clientY不是一樣的值，他們分別來(lái)自不同事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
button {
width: 80px;
height: 30px;
display: block;
margin: 0 auto;
background-color:#3b7ae3;
border-style: none;
border-radius: 5px;
color: #ffffff;
cursor: pointer;
}
.mask {
position: absolute;
top:0;
width: 100%;
height: 1000px;
background-color:black;
opacity: 0.75;
z-index: 99;
}
.login {
width: 350px;
height: auto;
border: 1px solid #fff;
position: absolute;
top:0;
left: 0;
z-index: 1000;
}
.title {
width:330px;
height: 50px;
padding-left: 20px;
line-height: 50px;
background-color: #eee;
position: relative;
cursor: move;
}
span {
position: absolute;
right:10px;
font-size: 30px;
font-weight: 300;
cursor: pointer;
}
.current {
padding: 10px 15px;
background-color: #fff;
}
.user,
.password{
margin-bottom: 10px;
}
.pt {
width:308px;
height: 40px;
padding-left: 10px;
}
.submit {
width: 320px;
height: 48px;
background-color:#3b7ae3;
color: #fff;
font-size: 16px;
border-style: none;
cursor: pointer;
}
</style>
<script>
window.onload = function(){
// 獲取元素
function $(id) {return document.getElementById(id);}
// 獲得可視區(qū)域的大小
var clientwidth = document.documentElement.clientWidth || document.body.clientWidth;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 點(diǎn)擊登錄按鈕
$("btn").onclick = function(){
// 創(chuàng)建mask
var mask = document.createElement("div");
mask.className = "mask";
// mask的高度等于可視化區(qū)域的高度
mask.style.height = clientHeight + "px";
document.body.appendChild(mask);
// 創(chuàng)建login
var login = document.createElement("div");
login.className = "login";
login.id = "_login";
login.innerHTML = '<div class="title" id="_title"> 登錄百度賬號(hào) '+' <span id="close">×</span>'+' </div>'+' <div class="current">'+
'<div class="user">'+' <input type="text" class="pt" placeholder="手機(jī)/郵箱/用戶名">'+
'</div>'+'<div class="password">'+'<input type="text" class="pt" placeholder="請(qǐng)輸入密碼">'+
'</div>'+'<div>'+' <input type="button" class="submit" value="登錄">'+'</div>';
document.body.appendChild(login);
// 設(shè)置login的位置垂直居中
login.style.left= (clientwidth - login.offsetWidth)/2 + "px";
login.style.top = (clientHeight - login.offsetHeight)/2 + "px";
// 當(dāng)窗口改變大小時(shí)，login仍然垂直居中顯示
window.onresize = function(){
if(window.innerWidth != null) // ie9+及新的瀏覽器
{
clientwidth = window.innerWidth;
clientHeight = window.innerHeight;
}
else if(document.compatMode == "CSS1Compat")// 標(biāo)準(zhǔn)模式
{
clientwidth = document.documentElement.clientX;
clientHeight = document.documentElement.clientY;
}
else
{
clientwidth = document.body.clientX;
clientHeight = document.body.clientY;
}
login.style.left= (clientwidth - login.offsetWidth)/2 + "px";
login.style.top = (clientHeight - login.offsetHeight)/2 + "px";
mask.style.height = clientHeight + "px";
}
// 鼠標(biāo)按下title實(shí)現(xiàn)拖拽
$("_title").onmousedown = function(event){
var event = event || window.event;
// 鼠標(biāo)相對(duì)盒子的位置
var moveX = event.clientX - login.offsetLeft;
var moveY = event.clientY - login.offsetTop;
document.onmousemove = function(event){
var event = event || window.event;
// 鼠標(biāo)移動(dòng)時(shí)的位置
var clientX1 = event.clientX;
var clientY1 = event.clientY;
// 盒子的偏移量 = 當(dāng)前鼠標(biāo)的位置 - 鼠標(biāo)按下時(shí)相對(duì)盒子的位置
var loginX = clientX1 - moveX;
var loginY = clientY1 - moveY;
// 判斷l(xiāng)ogin的位置是否超過(guò)可視區(qū)域
if(loginX <= 0)
{
loginX = 0;
}
else if(loginX >= clientwidth - $("_login").offsetWidth)
{
loginX = clientwidth - $("_login").offsetWidth;
}
if(loginY <= 0)
{
loginY = 0;
}
else if(loginY >= clientHeight - $("_login").offsetHeight)
{
loginY = clientHeight - $("_login").offsetHeight;
}
$("_login").style.left = loginX + "px";
$("_login").style.top = loginY + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
// 點(diǎn)擊叉號(hào)關(guān)閉
$("close").onclick = function(){
document.body.removeChild(mask);
document.body.removeChild(login);
}
}
}
}
</script>
</head>
<body>
<button id="btn">登錄</button>
<!-- <div class="mask" id="_mask"></div>
<div class="login" id="_login">
<div class="title" id="_title">
登錄百度賬號(hào)
<span id="close">×</span>
</div>
<div class="current">
<div class="user">
<input type="text" class="pt" placeholder="手機(jī)/郵箱/用戶名">
</div>
<div class="password">
<input type="text" class="pt" placeholder="請(qǐng)輸入密碼">
</div>
<div >
<input type="button" class="submit" value="登錄">
</div>
</div> -->
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇解決LayUI表單獲取不到data的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了詳解微信小程序中的頁(yè)面代碼中的模板的封裝的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-10-10
ES6如何將?Set?轉(zhuǎn)化為數(shù)組示例詳解
這篇文章主要為大家介紹了ES6如何將?Set?轉(zhuǎn)化為數(shù)組的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章介紹了頂部緩沖下拉菜單導(dǎo)航特效的JS代碼，有需要的朋友可以參考一下2013-08-08
JavaScript函數(shù)增強(qiáng)以及額外知識(shí)
函數(shù)就是封裝了一段可以被重復(fù)執(zhí)行調(diào)用的代碼塊,下面這篇文章主要給大家介紹了關(guān)于JavaScript函數(shù)增強(qiáng)以及額外知識(shí)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了tweenjs緩動(dòng)算法的使用,結(jié)合實(shí)例形式分析了Tween.js插件的原理與使用技巧,需要的朋友可以參考下2019-08-08
由于asp的cookie是經(jīng)過(guò)url編碼的，所以讀之前要unescape一下。2008-09-09
這篇文章主要為大家詳細(xì)介紹了bootstrap手風(fēng)琴折疊示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
正則表達(dá)式（regular expression）是一種表達(dá)文本模式（即字符串結(jié)構(gòu)）的方法，有點(diǎn)像字符串的模板，常常用作按照“給定模式”匹配文本的工具。下面通過(guò)本文給大家分享js 中的regexp對(duì)象，需要的朋友參考下吧2017-09-09
JS實(shí)現(xiàn)左右拖動(dòng)改變內(nèi)容顯示區(qū)域大小的方法
這篇文章主要介紹了JS實(shí)現(xiàn)左右拖動(dòng)改變內(nèi)容顯示區(qū)域大小的方法,涉及JavaScript實(shí)時(shí)響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10