介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt; title> Document
& lt; style>
* {
保证金:0;
上图:0;
}
.login-btn {
宽度:50 px;
高度:50 px;
行高:50 px;
字体大小:16 px;
text-align:中心;
保证金:100 px的汽车;
background - color: # 1 e1e1e;
颜色:白色;
这个特性:50%;
}
.login-btn:{徘徊
光标:指针;
background - color: # 323233;
不必:3 px 3 px 10 px rgba (0, 0, 0, 0。3);
}
.bg {
显示:没有;
宽度:100%;
高度:100%;
位置:固定;
上图:0;
左:0;
background - color: rgba (0, 0, 0。4);
}
.login {
显示:没有;
位置:固定;
上图:50%;
左:50%;
变换:翻译(-50%,-50%);
宽度:300 px;
身高:200 px;
background - color: # 1 e1e1e;
不必:4 px 4 px 15 px rgba (0, 0, 0, 0。3);
}
.hd {
位置:相对;
宽度:100%;
高度:26 px;
background - color: # 323233;
}
.hd:{徘徊
光标:移动;
}
.close {
位置:绝对的;
上图:3 px;
右:5 px;
宽度:20 px;
高度:20 px;
背景颜色:红色;
text-align:中心;
行高:20 px;
这个特性:50%;
不必:0 0 5 px rgba(0, 0, 0, 7)插图;
}
.close:{徘徊
背景颜色:黄色;
光标:指针;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=發ogin-btn"祝辞点击& lt;/div>
& lt; div类=癰g"祝辞& lt;/div>
& lt; div类=發ogin"祝辞
& lt; div类=癶d"祝辞
& lt; div类=癱lose"祝辞×& lt;/div>
& lt;/div>
& lt;/div>
& lt; script>//获取元素
var btn=document.querySelector (& # 39; .login-btn& # 39;);
var bg=document.querySelector (& # 39; .bg& # 39;);
var登录=document.querySelector (& # 39; .login& # 39;);
var=document.querySelector密切(& # 39;.close& # 39;);
var高清=document.querySelector (& # 39; .hd& # 39;);//按下btn,弹出对话框
btn.addEventListener(& # 39;点击# 39;,函数(){
bg.style。=& # 39;显示块# 39;;
login.style。=& # 39;显示块# 39;;
});//按下关闭,关闭对话框
close.addEventListener(& # 39;点击# 39;,函数(){
bg.style。=& # 39;显示没有# 39;;
login.style。=& # 39;显示没有# 39;;
});
hd.addEventListener (& # 39; mousedown& # 39;,函数(e) {//鼠标按下对话框顶部时,获取鼠标到对话框的距离
var x=e。pageX - login.offsetLeft;
var y=e。pageY - login.offsetTop;//鼠标按下并移动时,实时更新对话框的位置
document.addEventListener (& # 39; mousemove& # 39;,移动);
函数移动(e) {
login.style。左=e。pageX - x + & # 39; px # 39;;
login.style。=e。pageY - y + & # 39; px # 39;;
}//鼠标松开时,移除拖拽的动作
document.addEventListener (& # 39; mouseup # 39;,函数(){
document.removeEventListener (& # 39; mousemove& # 39;,移动);
});
});
& lt;/script>
& lt;/body>
& lt;/html>
这篇文章运用简单易懂的例子给大家介绍使用JavaScript实现拖动对话框效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
代码实现:
实现效果:
点击<代码>点击> 按住对话框顶部并移动,实现拖动效果。
点击对话框右上角<代码>×>
关于使用JavaScript实现拖动对话框效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
