這篇文章主要介紹了怎么用JavaScript做彈出式可拖動登錄框的相關知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇怎么用JavaScript做彈出式可拖動登錄框文章都會有所收獲,下面我們一起來看看吧。
創(chuàng)新互聯(lián)服務項目包括廣安網(wǎng)站建設、廣安網(wǎng)站制作、廣安網(wǎng)頁制作以及廣安網(wǎng)絡營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等,向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,廣安網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前,我們服務的客戶以成都為中心已經(jīng)輻射到廣安省份的部分城市,未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任!
總體來說實現(xiàn)起來比較簡單,老規(guī)矩,先搭建html框架,代碼如下:
css代碼:
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
*{
padding: 0px;
margin: 0px;
}
.login {
display: none;
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
transform: translate(-50%, -50%);
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .3);
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
有沒有覺得CSS才是最復雜難搞的哈哈
最后是js代碼:這里我們只讓盒子的title部分能拖動,也就是登錄框頭部部分
//獲取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
//創(chuàng)建點擊事件,點擊link后,登錄框顯示
link.addEventListener('click', function() {
mask.style.display = 'block';
login.style.display = 'block';
})
//關閉后,登錄框隱藏
closeBtn.addEventListener('click', function() {
mask.style.display = 'none';
login.style.display = 'none';
})
//鼠標按下,獲取登錄框位置
title.addEventListener('mousedown', function(e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
//鼠標移動,觸發(fā)移動事件
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
//鼠標抬起,銷毀鼠標移動事件
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
關于“怎么用JavaScript做彈出式可拖動登錄框”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“怎么用JavaScript做彈出式可拖動登錄框”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。