點(diǎn)擊立即登錄按鈕，彈出遮罩層和模態(tài)框。
點(diǎn)擊小叉號(hào)關(guān)閉模態(tài)框和遮罩層。
鼠標(biāo)在模態(tài)框的標(biāo)題上按下時(shí)，計(jì)算鼠標(biāo)在模態(tài)框中的坐標(biāo)。
給整個(gè)HTML文檔添加鼠標(biāo)移動(dòng)事件，通過(guò)算法實(shí)現(xiàn)模態(tài)框跟隨鼠標(biāo)移動(dòng)。
鼠標(biāo)在HTML文檔中松開時(shí)，移除HTML文檔的鼠標(biāo)移動(dòng)事件。

首先獲取我們需要操作的元素

let but = document.querySelector('.but') // 立即登錄按鈕
let shade = document.querySelector('.shade') ?// 遮罩層
let loginBox = document.querySelector('.login-box') // 模態(tài)框
let title = document.querySelector('.title') ? ?// 模態(tài)框標(biāo)題：用戶登錄
let exit = document.querySelector('.exit'); ?// 小叉號(hào)

點(diǎn)擊立即登錄按鈕，彈出遮罩層和模態(tài)框。

but.addEventListener('click', function() {
? ? shade.style.display = "block"; ?// 顯示遮罩層
? ? loginBox.style.display = "block"; ?// 顯示模態(tài)框
});

點(diǎn)擊小叉號(hào)關(guān)閉模態(tài)框和遮罩層。

exit.addEventListener('click', function() {
? ? shade.style.display = "none"; ?// 隱藏遮罩層
? ? loginBox.style.display = "none"; ?// 隱藏遮罩層
});

鼠標(biāo)在模態(tài)框標(biāo)題上按下時(shí)計(jì)算鼠標(biāo)在模態(tài)框中的坐標(biāo)：

title.addEventListener('mousedown', function(event) {
? ? let x = event.pageX - loginBox.offsetLeft;
? ? let y = event.pageY - loginBox.offsetTop;
});

event.pageX 和 event.pageY：獲取鼠標(biāo)在整個(gè)頁(yè)面中的 x 坐標(biāo)、y 坐標(biāo)。

loginBox.offsetLeft 和 loginBox.offsetTop：獲取模態(tài)框距離頁(yè)面左邊和上邊的距離。

通過(guò)相減的方式計(jì)算出鼠標(biāo)在模態(tài)框中的坐標(biāo)。

鼠標(biāo)在模態(tài)框標(biāo)題上按下后，再給 document 對(duì)象添加鼠標(biāo)移動(dòng)事件：

title.addEventListener('mousedown', function(event) {
? ? let x = event.pageX - loginBox.offsetLeft;
? ? let y = event.pageY - loginBox.offsetTop;
? ? document.addEventListener('mousemove', function() {
? ? ? ? // 鼠標(biāo)移動(dòng)后的新坐標(biāo)減去鼠標(biāo)在模態(tài)框中的坐標(biāo)，實(shí)現(xiàn)模態(tài)框跟隨鼠標(biāo)移動(dòng)
? ? ? ? loginBox.style.left = (event.pageX - x)+"px";
? ? ? ? loginBox.style.top = (event.pageY - y)+"px";
? ? });
});

這里為什么不把鼠標(biāo)移動(dòng)事件給 title ?

如果把鼠標(biāo)移動(dòng)事件給 title 的話，鼠標(biāo)移動(dòng)過(guò)快，會(huì)脫離模態(tài)框，導(dǎo)致模態(tài)框無(wú)法跟隨移動(dòng)。

如果想看效果，把這里的 document 換成 title，然后快速拖動(dòng)即可，這里不做演示！

到這里已經(jīng)實(shí)現(xiàn)了模態(tài)框跟隨鼠標(biāo)移動(dòng)，但當(dāng)我們松開鼠標(biāo)后，發(fā)現(xiàn)模態(tài)框依舊跟隨鼠標(biāo)移動(dòng)。所以，還需要給 document 添加鼠標(biāo)松開事件。

title.addEventListener('mousedown', function(event) {
? ? let x = event.pageX - loginBox.offsetLeft;
? ? let y = event.pageY - loginBox.offsetTop;
? ? document.addEventListener('mousemove', loginBoxMove);
? ? // 這里需要把鼠標(biāo)移動(dòng)事件函數(shù)寫在外面，因?yàn)橐瞥录O(jiān)聽器時(shí)也會(huì)用到！
? ? function loginBoxMove(event) {
? ? ? ? loginBox.style.left = (event.pageX - x)+"px";
? ? ? ? loginBox.style.top = (event.pageY - y)+"px";
? ? }
? ? document.addEventListener('mouseup', function() {
? ? ? ? document.removeEventListener('mousemove', loginBoxMove);
? ? })
});

這里為什么不把鼠標(biāo)松開事件給 title ?

還是會(huì)遇到上述類似的情況，大家可以自行嘗試！

源代碼

<!DOCTYPE html>
<head>
? ? <meta charset="UTF-8">
? ? <title>模態(tài)框</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? letter-spacing: 3px;
? ? ? ? }
? ? ? ? body {
? ? ? ? ? ? background-color: #ffbf84;
? ? ? ? }
? ? ? ? /* 立即登錄按鈕和模態(tài)框水平垂直居中 */
? ? ? ? .but, .login-box {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? }
? ? ? ? /* 遮罩層 */
? ? ? ? .shade {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? background-color: rgba(0, 0, 0, .3);
? ? ? ? ? ? /* 這里一定要把遮罩層移到重疊元素的上層，就可以造成父窗口無(wú)法操作的效果 */
? ? ? ? ? ? z-index: 1;
? ? ? ? }
? ? ? ? /* 立即登錄按鈕 */
? ? ? ? .but {
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? display: block;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 60px;
? ? ? ? ? ? border-radius: 30px;
? ? ? ? ? ? box-shadow: 0 10px 10px rgba(10, 20, 20, .2);
? ? ? ? ? ? background-color: #fa8282;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? font-size: 25px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 60px;
? ? ? ? }
? ? ? ? .but:hover {
? ? ? ? ? ? transition: background-color 0.5s;
? ? ? ? ? ? background-color: #f36886;
? ? ? ? }
? ? ? ? /* 模態(tài)框 */
? ? ? ? .login-box {
? ? ? ? ? ? display: none;
? ? ? ? ? ? width: 350px;
? ? ? ? ? ? height: 250px;
? ? ? ? ? ? border: 1px solid rgb(216, 216, 216);
? ? ? ? ? ? border-radius: 10px;
? ? ? ? ? ? box-shadow: 5px 5px 10px rgba(10, 20, 20, .2), -5px -5px 10px rgba(10, 20, 20, .2);
? ? ? ? ? ? background-color: #fff;
? ? ? ? ? ? /* 和遮罩層同理，模態(tài)框一定要在最上層 */
? ? ? ? ? ? z-index: 1;
? ? ? ? }
? ? ? ? .login-box .title {
? ? ? ? ? ? cursor: move;
? ? ? ? ? ? user-select: none; ?/* 禁止用戶選中文字 */
? ? ? ? ? ? position: relative;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 70px;
? ? ? ? ? ? color: #3f3f3f;
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? font-weight: 700;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 70px;
? ? ? ? }
? ? ? ? .login-box .title .exit {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: -10px;
? ? ? ? ? ? right: 10px;
? ? ? ? ? ? font-size: 30px;
? ? ? ? }
? ? ? ? .login-box .title .exit:hover {
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? text-shadow: 2px 2px 4px rgba(10, 20, 20, .5);
? ? ? ? }
? ? ? ? .login-box form {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: column;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? padding: 10px 0;
? ? ? ? }
? ? ? ? .login-box form .input-box {
? ? ? ? ? ? width: 60%;
? ? ? ? ? ? height: 35px;
? ? ? ? ? ? margin-bottom: 20px;
? ? ? ? ? ? padding: 0px 10px;
? ? ? ? ? ? border: 1px solid #3f3f3f;
? ? ? ? ? ? border-radius: 8px;
? ? ? ? ? ? color: #3f3f3f;
? ? ? ? ? ? font-size: 16px;
? ? ? ? ? ? font-weight: 700;
? ? ? ? }
? ? ? ? .login-box form .input-box:focus {
? ? ? ? ? ? outline: none;
? ? ? ? }
? ? ? ? .login-box form .login-but {
? ? ? ? ? ? width: 120px;
? ? ? ? ? ? height: 35px;
? ? ? ? ? ? border: none;
? ? ? ? ? ? background-color: #fa8282;
? ? ? ? ? ? border-radius: 8px;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? font-weight: 700;
? ? ? ? }
? ? ? ? .login-box form .login-but:hover {
? ? ? ? ? ? background-color: #f36886;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <!-- 遮罩層 -->
? ? <div class="shade"></div>
? ? <!-- 登錄按鈕 -->
? ? <span class="but">立即登錄</span>
? ? <!-- 模態(tài)框 -->
? ? <div class="login-box">
? ? ? ? <div class="title">
? ? ? ? ? ? 用戶登錄
? ? ? ? ? ? <span class="exit">×</span>
? ? ? ? </div>
? ? ? ? <form action="">
? ? ? ? ? ? <input type="text" class="input-box" placeholder="用戶名">
? ? ? ? ? ? <input type="password" class="input-box" placeholder="密碼">
? ? ? ? ? ? <input type="submit" class="login-but" value="登錄">
? ? ? ? </form>
? ? </div>
? ? <script>
? ? ? ? let but = document.querySelector('.but');
? ? ? ? let shade = document.querySelector('.shade');
? ? ? ? let loginBox = document.querySelector('.login-box');
? ? ? ? let title = document.querySelector('.title');
? ? ? ? let exit = document.querySelector('.exit');
?
? ? ? ? // 立即登錄按鈕點(diǎn)擊事件
? ? ? ? but.addEventListener('click', function() {
? ? ? ? ? ? shade.style.display = "block";
? ? ? ? ? ? loginBox.style.display = "block";
? ? ? ? });
?
? ? ? ? // 關(guān)閉模態(tài)框事件
? ? ? ? exit.addEventListener('click', function() {
? ? ? ? ? ? shade.style.display = "none";
? ? ? ? ? ? loginBox.style.display = "none";
? ? ? ? });
?
? ? ? ? // 拖動(dòng)標(biāo)題區(qū)域可移動(dòng)模態(tài)框
? ? ? ? title.addEventListener('mousedown', function(event) {
? ? ? ? ? ? // 計(jì)算鼠標(biāo)在登錄框中坐標(biāo)
? ? ? ? ? ? let x = event.pageX - loginBox.offsetLeft;
? ? ? ? ? ? let y = event.pageY - loginBox.offsetTop;
? ? ? ? ? ? // 給頁(yè)面添加鼠標(biāo)移動(dòng)事件
? ? ? ? ? ? document.addEventListener('mousemove', loginBoxMove);
? ? ? ? ? ? function loginBoxMove(event) {
? ? ? ? ? ? ? ? loginBox.style.left = (event.pageX - x)+"px";
? ? ? ? ? ? ? ? loginBox.style.top = (event.pageY - y)+"px";
? ? ? ? ? ? }
? ? ? ? ? ? // 鼠標(biāo)松開后移除頁(yè)面的鼠標(biāo)移動(dòng)事件
? ? ? ? ? ? document.addEventListener('mouseup', function() {
? ? ? ? ? ? ? ? document.removeEventListener('mousemove', loginBoxMove);
? ? ? ? ? ? })
? ? ? ? });
? ? </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: