目录
核心思路讲解:
h3.addEventListener('mousedown',function(e) {
h3.style.cursor = 'move';
var x = e.pageX - wrap.offsetLeft;
var y = e.pageY - wrap.offsetTop;
因为是此时点击触发,所以获取到此时鼠标在框内的坐标是固定不变的。
document.addEventListener('mousemove',move); //
function move(e) {
wrap.style.left = e.pageX - x + 'px';
wrap.style.top = e.pageY - y + 'px';
}
鼠标移动事件要添加到document,因为实在整个页面移动。移动时动态获取鼠标的坐标,将此鼠标的坐标
HTML和CSS代码:
<style>
*{
margin: 0;padding: 0;
}
h1{
width: 300px;
text-align: center;
background-color: bisque;
position: absolute;
z-index: 1;
left: 600px;
}
.wrap{
width: 450px;
height: 240px;
border: 1px solid #ccc;
box-shadow: 0 0 15px #aaa;
position:absolute;
left: 500px;
top: 200px;
display: none;
background-color: white;
z-index: 3;
}
label{
display: inline-block;
width: 100px;
height: 50px;
text-align: right;
line-height: 50px;
}
.wrap>div>input{
width: 260px;
height: 35px;
outline: none;
border: 1px solid #ccc;
padding-left: 12px;
}
.wrap>div{
margin-bottom: 5px;
}
.wrap>button{
width: 40px;height: 40px;
border-radius: 50%;
position: absolute;
right: -20px; top: -20px;
border: 1px solid #ccc;
background-color: white;
font-size: 16px;
}
h3{
width: 100%;
padding: 15px 0;
text-align: center;
}
.wrap>input{
display: block;
width: 200px;
text-align: center;
height: 35px; line-height: 35px;
background-color: white;
margin: 25px auto;
border: 1px solid #ccc;
font-weight: bold;
}
.wrap>div>input.hover{
border: 1px solid rgb(33, 155, 254);
}
.bg{
width: 100%;
height: 100%;
position: absolute;
display: none;
background-color: rgba(48, 47, 47,0.5);
z-index: 2;
}
</style>
<h1>点击弹出登录框</h1>
<div class="wrap">
<button>关闭</button>
<h3>登陆会员</h3>
<div>
<label for="uname">用户名:</label>
<input type="text" id="uname" class="ipt" placeholder="请输入用户名">
</div>
<div>
<label for="pwd">登录密码:</label>
<input type="password" id="pwd" class="ipt" placeholder="请输入登录密码">
</div>
<input type="submit" value="登陆会员">
</div>
<div class="bg"></div>
JavaScript代码:
var h1 = document.querySelector('h1');
var wrap = document.querySelector('.wrap');
var bg = document.querySelector('.bg');
//点击弹出登录框
h1.onclick = function() {
wrap.style.display = 'block';
bg.style.display = 'block';
}
//禁止登录框的选中文字
wrap.addEventListener('selectstart',function(e){
e.preventDefault();
})
var btn = wrap.children[0];
//设置关闭按钮点击事件,关闭登录框
btn.addEventListener('click',function() {
wrap.style.display = 'none';
bg.style.display = 'none';
})
var ipt = wrap.querySelectorAll('.ipt');
//给表单添加获得焦点和失去焦点事件,改变边框颜色
for(var i = 0; i < ipt.length; i++){
ipt[i].onfocus = function() {
this.className = 'ipt hover';
}
ipt[i].onblur = function() {
this.className = 'ipt';
}
}
var h3 = wrap.querySelector('h3');
// 鼠标按下,获取此时鼠标在登录框内坐标
h3.addEventListener('mousedown',function(e) {
h3.style.cursor = 'move';
var x = e.pageX - wrap.offsetLeft;
var y = e.pageY - wrap.offsetTop;
// 鼠标移动,获取鼠标在页面移动时坐标,减去之前获取到的鼠标在框内坐标即登录框移动坐标
document.addEventListener('mousemove',move); //
function move(e) {
wrap.style.left = e.pageX - x + 'px';
wrap.style.top = e.pageY - y + 'px';
}
// 鼠标松开,清除鼠标移动事件
document.addEventListener('mouseup',function() {
document.removeEventListener('mousemove',move);
h3.style.cursor = '';
});
})